Home >Web Front-end >HTML Tutorial >css制作的圆,三角形,椭圆,箭头图标

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

WBOY
WBOYOriginal
2016-06-01 09:53:271770browse

圆:

<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制作的圆,三角形,椭圆,箭头图标

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn