1、椭圆
#oval {
width: 200px;
height: 100px;
background: red;
border-radius: 100px / 50px;//如果“/”前后的值都存在,那么“/”前面的值设置其水平半径,“/”后面值设置其垂直半径.
}
椭圆
此外还有：border-top-left-radius:10px（左上角)，border-top-right-radius，border-bottom-right-radius:10px;
2、上三角
#triangle-up {
width: 0px;
height: 0px;
border: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: transparent;
}
上三角
3、梯形
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
梯形
4、五角星
#star-five {
margin: 100px 0;
position: relative;
display: block;
color: red;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
content: '';
transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}
五角星
5、八卦
#yin-yang {
margin: 100px 0;
position: relative;
display: block;
color: red;
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#yin-yang:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
width: 12px;
height: 12px;
}
#yin-yang:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
八卦
6、✔️
a{
display: inline-block;
margin-top: 100px;
width: 20px;
height:5px;
background: red;
line-height: 0;
font-size:0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
a:after{
content:'/';
display:block;
width: 40px;
height:5px;
background: red;
-webkit-transform: rotate(-90deg) translateY(-50%) translateX(50%);
}
对号
7、锯齿效果
锯齿
.wave {
height: 10px;
background-image: linear-gradient(135deg, #fff, #fff 7px, transparent 7px, transparent 20px),
linear-gradient(45deg, transparent, transparent 13px, #fff 13px, #fff 20px),
linear-gradient(135deg, #eee, #eee 8px, transparent 8px, transparent 20px),
linear-gradient(45deg, transparent, transparent 12px, #eee 12px, #eee 20px);
background-size: 20px 10px;
}
网友评论