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);
}
如果喜欢，不要吝啬你的爱心“❤”哦！
网友评论