css图形
CSS 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。尤其是图形,今天将我之前收集查找编写的图形放出来
三角形:
.div01{width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #01acf2;
}
<div class=”div01”></div>
四边切角:
.div02 {
width: 40px;
height: 40px;
padding: 40px;
background: linear-gradient(135deg, transparent 15px, #01acf2 0) top left,/*上左*/
linear-gradient(-135deg, transparent 15px, #01acf2 0) top right,/*上右*/
linear-gradient(-45deg, transparent 15px, #01acf2 0) bottom right,/*下右*/
linear-gradient(45deg, transparent 15px, #01acf2 0) bottom left;/*下左*/
background-size: 50% 50%;
background-repeat: no-repeat;
}
<div class=”div02”></div>
正梯形:
.div03{
position: relative;
width: 60px;
padding: 60px;
}
.div03::before{
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform: perspective(20px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: #01acf2;
}
<div class="div03"></div>
倒梯形:(另种方式展现)
.div04 {
position: relative;
width: 60px;
border-top: 60px solid #01acf2;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
<div class="div04"></div>
椭圆:
.div05 {
width: 200px;
height: 100px;
background: #01acf2;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
<div class="div05"></div>
鸡蛋图形:
.div06 {
width: 120px;
height: 160px;
background-color: yellowgreen;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
<div class="div06"></div>
六边形:
.div07 {
position: relative;
width: 60px;
border-bottom: 60px solid #01acf2;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
.div07::before {
content: "";
position: absolute;
width: 60px;
height: 0px;
top: 60px;
left: -40px;
border-top: 60px solid #01acf2;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
}
<div class="div07"></div>
五角星
.div08 {
margin: 50px 0;
position: relative;
width: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid #01acf2;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(.6);
}
.div08:before {
content: '';
position: absolute;
border-bottom: 80px solid #01acf2;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
top: -45px;
left: -65px;
transform: rotate(-35deg);
}
.div08:after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid #01acf2;
border-left: 100px solid transparent;
transform: rotate(-70deg);
}
<div class="div08"></div>
.............................................