<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
.box {
width: 20%;
height: 50px;
color: #fff;
font-size: 22px;
text-align: center;
line-height: 50px;
cursor: pointer;
margin-left: -45px;
}
.box1{
/*clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);*/ 这个方式也可以
background: linear-gradient(-45deg, transparent 52px, #1853ac 0) top right;
}
.box2{
background: #6e45e2;
transform: skew(135deg);
}
.box2_text {
/* div斜了会影响里面的文本，所以需要把div斜了，让文本正常，文本就要逆向倾斜，并且包裹文本的元素必须是块级元素 */
transform: skew(-135deg);
}
.box2:hover {
transform: scale(0.95) skew(135deg);
transition: all 0.5s;
}
.box3{
background: linear-gradient(135deg, transparent 52px, #1853ac 0) top right;
}
.box1:hover,.box3:hover{
transition: all 0.5s;
transform: scale(0.95);
}
</style>
</head>
<body>
<div style="display: flex;padding: 50px;">
<div class="box1 box">加入购物车</div>
<div class="box2 box">
<div class="box2_text">支付订单</div>
</div>
<div class="box3 box">等待收货</div>
</div>
</body>
</html>
图片.png
