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>

.............................................