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
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>Additional CSS forms can be found here: https://css-tricks.com/examples/ShapesOfCSS/
. , , . , .
, . , :
.holder{background:red;}
+3
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>+3