css图形解析

css图形

 css 发展到今天已经越来越强大了。其语法的日新月异，让很多以前完成不了的事情，现在可以非常轻松的做到。尤其是图形，今天将我之前收集查找编写的图形放出来

三角形：

.p01{width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid #01acf2;

}

 

四边切角：

.p02 {

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;

}

 

正梯形：

.p03{

position: relative;

width: 60px;

padding: 60px;

}

.p03::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;

}

 

倒梯形：（另种方式展现）

.p04 {

position: relative;

width: 60px;

border-top: 60px solid #01acf2;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

}

 

椭圆：

.p05 {

width: 200px;

height: 100px;

background: #01acf2;

-webkit-border-radius: 100px / 50px;

-moz-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

 

鸡蛋图形：

.p06 {

width: 120px;

height: 160px;

background-color: yellowgreen;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

 

六边形：

.p07 {

position: relative;

width: 60px;

border-bottom: 60px solid #01acf2;

border-left: 40px solid transparent;

border-right: 40px solid transparent;

}

.p07::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;

}

 

五角星

.p08 {

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);

}

.p08: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);

}

.p08: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);

}