Triangle shape of anchor tag - css

Question

I'm doing "interactive" menu with pure css , code :
<div class="holder">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
<li>seven</li>
<li>eight</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 it isnt possible to fill that empty space next to anchor tag , to make it look like triangle (a.k.a slice of pizza)
Is there any way how to reach that goal?

Answer 1

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>
Additional CSS shapes can be found here: https://css-tricks.com/examples/ShapesOfCSS/
Edit: I may have misunderstood the original pizza-like question. I assumed you meant a downward triangle.
Instead it seems you want to simply fill in the white area with color. If that is correct you could do the following:
.holder{background:red;}

Answer 2

Try increasing the dimensions of the li and remove the border radius.
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>one
</li>
<li>two
</li>
<li>three
</li>
<li>four
</li>
<li>five
</li>
<li>six
</li>
<li>seven
</li>
<li>eight
</li>
</ul>