当前位置:Gxlcms > html代码 > css制作的圆,三角形,椭圆,箭头图标

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

时间:2021-07-01 10:21:17 帮助过:49人阅读

圆:

.yuan{
    width:100px;
    height:100px;
    -moz-border-radius:50%; 
    -webkit-border-radius:50%; 
    border-radius:50%; 
    background-color:red;
}

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

椭圆

.oval { 
    width: 200px; 
    height: 100px; 
    background-color: red; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 100px / 50px; 
    border-radius: 100px / 50px; 
}

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

箭头:

.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;
}

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

三角形:

.rencentle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

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

人气教程排行