• one
  • All geek questions in one place

    Anchor Triangle Shape

    I am making an "interactive" menu with pure css, code:

    <div class="holder">
       <ul>
           <li><a href="">one</a></li>
           <li><a href="">two</a></li>
           <li><a href="">three</a></li>
            <li><a href="">four</a></li>
           <li><a href="">five</a></li>
           <li><a href="">six</a></li>
           <li><a href="">seven</a></li>
           <li><a href="">eight</a></li>
       </ul> 
    
    </div> 
    
    
    *{
        margin:0;
        padding:0;
    }
    .holder{
        position:fixed;
        z-index: 10;
        overflow:hidden;
        left:6em;
        width:26em;
        height:26em;
        border-radius:50%;
        border:1px solid black;
    
    }
    .holder ul li{
    position:absolute;
    width:10em;
    height:10em;
        left: 50%;
          top: 50%;
    transform-origin: 100% 100%;
     overflow: hidden;
    border:1px solid black;
     margin-left:-10em;
        margin-top:-10em;
    }
    .holder ul li:nth-child(1){
    
        -webkit-transform:rotate(0deg) skew(45deg)
    }
    .holder ul li:nth-child(2){
    
        -webkit-transform:rotate(45deg) skew(45deg)
    }
    .holder ul li:nth-child(3){
    
        -webkit-transform:rotate(90deg) skew(45deg)
    }
    .holder ul li:nth-child(4){
    
        -webkit-transform:rotate(135deg) skew(45deg)
    }
    .holder ul li:nth-child(5){
    
        -webkit-transform:rotate(180deg) skew(45deg)
    }
    .holder ul li:nth-child(6){
    
        -webkit-transform:rotate(225deg) skew(45deg)
    }
    .holder ul li:nth-child(7){
    
        -webkit-transform:rotate(270deg) skew(45deg)
    }
    .holder ul li:nth-child(8){
    
        -webkit-transform:rotate(315deg) skew(45deg)
    }
    .holder ul li a{
     display:block;  
     position:absolute;
    
     -webkit-transform:skew(-45deg) rotate(-67.5deg);
        width:14em;
        height:14em;
    
    border-radius: 50%;
        bottom: -6.25em;
          right: -6.25em;
      text-decoration: none;
        text-align:Center;
        background-color:red;
        font-size: 1.18em;
       padding-top: 2.8em;
    
    }
    

    live demo: http://jsfiddle.net/Trolstover/n9bge484/8/

    but it seems impossible to fill this empty space next to the anchor tag so that it looks like a triangle (aka pizza slice)

    Is there a way to achieve this?

    +4
    css css3 css-shapes
    Darlyn Apr 24 '15 at 17:52
    source share
    2 answers

    If all you are trying to do is create a downward triangle with pure CSS, you can use the following snippet:

    #triangle-down {
    	width: 0;
    	height: 0;
    	border-left: 50px solid transparent;
    	border-right: 50px solid transparent;
    	border-top: 100px solid red;
    }
    <div id="triangle-down"></div>
    Run codeHide result

    Additional CSS forms can be found here: https://css-tricks.com/examples/ShapesOfCSS/

    . , , . , .

    , . , :

    .holder{background:red;}

    +3
    xengravity 24 . '15 17:54

    li .

    width:13em;
    height:13em;
    margin-left:-13em;
    margin-top:-13em;
    

    * {
      margin: 0;
      padding: 0;
    }
    .holder {
      position: fixed;
      z-index: 10;
      overflow: hidden;
      left: 6em;
      width: 26em;
      height: 26em;
      border-radius: 50%;
      border: 1px solid black;
    }
    .holder ul li {
      position: absolute;
      width: 13em;
      height: 13em;
      left: 50%;
      top: 50%;
      transform-origin: 100% 100%;
      overflow: hidden;
      border: 1px solid black;
      margin-left: -13em;
      margin-top: -13em;
    }
    .holder ul li:nth-child(1) {
      -webkit-transform: rotate(0deg) skew(45deg)
    }
    .holder ul li:nth-child(2) {
      -webkit-transform: rotate(45deg) skew(45deg)
    }
    .holder ul li:nth-child(3) {
      -webkit-transform: rotate(90deg) skew(45deg)
    }
    .holder ul li:nth-child(4) {
      -webkit-transform: rotate(135deg) skew(45deg)
    }
    .holder ul li:nth-child(5) {
      -webkit-transform: rotate(180deg) skew(45deg)
    }
    .holder ul li:nth-child(6) {
      -webkit-transform: rotate(225deg) skew(45deg)
    }
    .holder ul li:nth-child(7) {
      -webkit-transform: rotate(270deg) skew(45deg)
    }
    .holder ul li:nth-child(8) {
      -webkit-transform: rotate(315deg) skew(45deg)
    }
    .holder ul li a {
      display: block;
      position: absolute;
      -webkit-transform: skew(-45deg) rotate(-67.5deg);
      width: 14em;
      height: 14em;
      bottom: -6.25em;
      right: -6.25em;
      text-decoration: none;
      text-align: Center;
      background-color: red;
      font-size: 1.18em;
      padding-top: 2.8em;
    }
    <div class="holder">
      <ul>
        <li><a href="javascript:alert('1')">one</a>
        </li>
        <li><a href="javascript:alert('2')">two</a>
        </li>
        <li><a href="javascript:alert('3')">three</a>
        </li>
        <li><a href="javascript:alert('4')">four</a>
        </li>
        <li><a href="javascript:alert('5')">five</a>
        </li>
        <li><a href="javascript:alert('6')">six</a>
        </li>
        <li><a href="javascript:alert('7')">seven</a>
        </li>
        <li><a href="javascript:alert('8')">eight</a>
        </li>
      </ul>
    Hide result
    +3
    Musa 24 . '15 18:10

    Source: https://habr.com/ru/post/1584544/

    More articles:

    • PHPExcel не может открыть сохраненный файл - php
    • Невозможно подключиться к локальному (бегущему) монго, используя 'meteor mongo' - mongodb
    • Jackson: change JSON property value by appearance - java
    • How to implement file upload using the Web API POST, which can be easily tested - c #
    • Отключение автовоспроизведения на видео Vimeo, установленное в определенное время для воспроизведения - vimeo
    • JavaFx ObservableList sorted() vs sorted (Comparator. naturalOrder()) - java
    • Scale Height Data Scale - c #
    • Random number generation in parallel programs - python
    • Setting the width in a series of columns: using dotNetCharting - c #
    • Long Look notification: dynamic interface not showing, only static interface - ios

    All Articles

    Geek Questions | 2019