The CSS to make arrow icon code (circle, triangle, oval)

CSS 3 function is very powerful, need pictures to complete before icon, now we only need a few period of CSS code can achieve this functionality. Below to share pure CSS production circle, ellipse, triangle arrow icon, use very much, need friends under reference
circle:

.circle{    
width:100px;    
height:100px;    
-moz-border-radius:50%;    
-webkit-border-radius:50%;    
border-radius:50%;    
background-color:red;    
}    
<div class="circle"></div>

1
ellipse:

.oval {    
width: 200px;    
height: 100px;    
background-color: red;    
-moz-border-radius: 100px / 50px;    
-webkit-border-radius: 100px / 50px;    
border-radius: 100px / 50px;    
}    
<div class="oval"></div>

1

triangle:

    .rencentle {    
    width: 0;    
    height: 0;    
    border-left: 50px solid transparent;    
    border-right: 50px solid transparent;    
    border-bottom: 100px solid red;    
    }    
    <div class="rencentle"></div>

1
arrow icon:

.arrow{    
content: '';    
position: absolute;    
width: 30px;    
height: 30px;    
border: 10px solid #f5b24a;    
-webkit-transform: rotate(-135deg);    
-moz-transform: rotate(-135deg);    
-o-transform: rotate(-135deg);    
-ms-transform: rotate(-135deg);    
transform: rotate(-135deg);    
border-top: none;    
border-right: none;    
top: 9px;    
}    
<span class="arrow"></span>

1

No Comments

Leave a Reply