公司管理平台首页改版中有个圆角平行四边形的标签页。由于以前没接触到过这个,没什么经验,所以我只好求助万能的 google ,但是我用关键字“css 圆角平行四边形”并没有搜出答案来,于是我退而求其次,那就搜“css 平行四边形”,这个我有把握 100% 能用 强大的css 实现,果然一搜就出现了:CSS秘密花园:平行四边形

实现代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.button{
transform: skewX(-30deg);
background: linear-gradient(to right, #7BBBB2, #46AEAA);
color: #fff;
text-align: center;
padding: 8px 20px;
display: inline-block;
border-radius: 4px;
box-sizing: border-box;
margin-left: 10px;
box-shadow: 0px 5px 10px -3px rgba(0, 0, 0, 0.5);
}
.button > div{
transform: skewX(30deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="button">
<div>
首页
</div>
</div>
<div class="button">
<div>
采集管理
</div>
</div>
<div class="button">
<div>
数据管理
</div>
</div>

简单来说就是利用css的transform: skewX(deg)属性来实现元素的扭曲,但是元素扭曲的同时,会使元素内的内容也随之扭曲,所以就需要用另一个元素把不想扭曲的元素包裹起来,然后对外层使用扭曲,内层元素再使用反向扭曲来抵消,一次来实现效果。然后我又给外层元素添加了border-radios,于是圆角平行四边形就诞生啦!

效果图: