>  기사  >  웹 프론트엔드  >  css制作的圆,三角形,椭圆,箭头图标

css制作的圆,三角形,椭圆,箭头图标

WBOY
WBOY원래의
2016-06-01 09:53:271665검색

圆:

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

css制作的圆,三角形,椭圆,箭头图标

椭圆

<code>.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></code>

css制作的圆,三角形,椭圆,箭头图标

箭头:

<code>.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></code>

css制作的圆,三角形,椭圆,箭头图标

三角形:

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

css制作的圆,三角形,椭圆,箭头图标

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.