CSS绘制平⾏四边形⽅法有三：
(1)、⽗元素transform: skewX(-45deg);⼦元素transform: skewX(45deg);
效果图1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.react {
margin-left: 100px;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
background: #ddd;
transform: skewX(-45deg);
}
.text {
display: inline-block;
transform: skewX(45deg);
}
</style>
</head>
<body>
<div class="react">
<span class="text">React前端技术</span>
</div>
</body>
</html>
text align center
(2)、将平⾏四边形的样式放置于“伪元素”样式中，还是采⽤transform: skewX(-45deg);
效果图2：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.vue{
margin-left: 100px;
position: relative;
width: 300px;
height: 50px;
line-height: 50px;
text-align: center;
}
.vue::before{
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: '';
background: #ddd;
z-index: -1;
transform: skewX(-45deg);
}
</style>
</head>
<body>
<div class="vue"> Vue前端技术</div>
</body>
</html>
(3)、先画矩形，再与两头的三⾓形进⾏拼接，两个三⾓形⽤到的也是"伪元素";
我们先来了解下border绘制宽度和⾼度为0，border-width有⼀定宽度的图形，看图说话border-color: red yellow blue green;  //分别为上边框、右边框、下边框、左边框的颜⾊                                                                                                效果图3：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.test{
width: 0;
height: 0;
border-width: 50px;
border-style: solid;
border-color: red yellow blue green;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
那么绘制平⾏四边形呢？
思路：先画中间的矩形，再⽤绝对定位绘制两头的三⾓形，每⼀个三⾓形都是由两个⼩三⾓形组成的，⽽其中的⼩三⾓形就是上述所说的width、height为0，设置border宽度所绘制，思路懂了吗？看代码，看效果图：
效果图4：
图中采取红、绿、蓝三种颜⾊，以⽰区分。⾃⼰做项⽬可改成同⼀种颜⾊。
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.angular{
margin-left: 100px;
position: relative;
display: inline-block;
width: 300px;
height: 50px;
line-height: 50px;
padding: 0 10px;
text-align: center;
color: #fff;
background: green;
}
.angular::before{
display: block;
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 0;
content: '';
border-width: 25px;
border-style: solid;
border-color: transparent red blue transparent;
}
.angular::after{
border-color: blue transparent transparent red;
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 25px;
top: 0;
right: -50px;
}
</style>
</head>
<body>
<div class="angular">Angular前端技术</div>
</body>
</html>
总上所述，本⼈更喜欢第⼀种，代码少啊！
应该还有更多的思路，增量补充，欢迎点赞留⾔！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。