css制作各种几何图案

border-radius: 10px/10px 水平和垂直半径；

1.实现平行四边形导航：

方法一：元素嵌套，父元素skew。

方法二：使用内容生成。

.cont{

position:relative;

width:100px;

height:60px;

line-height:60px;

text-align:center;

}

.cont:before{

content:' ';

position:absolute;

top:0;

left:0;

right:0;

bottom:0;

background:#58a;

transform:skew(-30deg);

z-index: -5;

}

2.实现多边形：

.cont{

width:100px;

height:60px;

background:#58a;

background:linear-gradient(135deg,#fff 22px,#58a 0) top left,

linear-gradient(-135deg,#fff 22px,#58a 0) top right,

linear-gradient(-45deg,#fff 22px,#58a 0) bottom right,

linear-gradient(45deg,#fff 22px,#58a 0) bottom left;

background-repeat:no-repeat;

background-size:50%50%;

}

去掉左边2个角，就成了向右的箭头，改变渐变范围就成了多边形。

3.实现梯形导航：

.cont{

position: relative;

margin: 80px;

width: 100px;

height: 60px;

color: #fff;

}

.cont:before{

content: ' ';

position: absolute;

top: 0; left:0; bottom: 0; right:0;

z-index: -5;

background: #58a;

transform:scale(1.3) perspective(10px)  rotateX(5deg);

transform-origin: bottom;

}

4.动态饼状图

@keyframes ant{

100%{

transform:rotate(.5turn);

}}

@keyframes bg{

50%{

background:#0acf00

}}

.cont{

position:relative;

width:100px;

height:100px;

border-radius:50%;

background:#666;

background-image:linear-gradient(90deg,transparent 50%,#0acf00 0);

overflow:hidden;

}

.cont:before{

content:'';

display:block;

margin-left:50%;

height:100%;

background-color:inherit;

transform:rotate(.1turn);

transform-origin:left;

animation:ant 3s linear infinite,bg 6s step-end infinite;

transition:all5s;

}

5.实现底边阴影效果

.cont{

width:30%;

height: 50px;

line-height: 50px;

text-align:center;

background: #69b000;

box-shadow:0 5px 4px -4px  black;

}

6.实现折角的效果

.corner{

height:100px;

width:80px;

background:#0acf00;

background:linear-gradient(-135deg,transparent 50%,rgba(0,0,0,.5) 0)no-repeat 100% 0/ 2em 2em,

linear-gradient(-135deg,transparent  1.42em, #0acf000);

}

---

如果喜欢，不要吝啬你的爱心“❤”哦！