三角形状的锚标签

Question

我正在使用纯css进行“交互式”菜单，代码：

<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;

}

现场演示：http://jsfiddle.net/Trolstover/n9bge484/8/

但似乎不可能填充锚标签旁边的空白区域，使其看起来像三角形（a.k.a披萨片）

有没有办法达到这个目标？

Answer 1

如果您要做的只是创建一个带有纯CSS的向下三角形，您可以使用以下代码段：

＆＃13;

＆＃13;

#triangle-down {
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 100px solid red;
}

＆＃13;

<div id="triangle-down"></div>

＆＃13;

＆＃13;

＆＃13;

可在此处找到其他CSS形状：https://css-tricks.com/examples/ShapesOfCSS/

编辑：我可能误解了原始的披萨式问题。我以为你是一个向下的三角形。

相反，您似乎只想用颜色填充白色区域。如果这是正确的，您可以执行以下操作：

.holder{background:red;}

Answer 2

尝试增加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>