实现如下的样式:
```css
腰峰:
width: 103px;
height: 56px;
background-image: linear-gradient(to right,#FFEEBA, #FEE8A3);
clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%, 0 50%);
pop:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container{
width:192px;
height:50px;
position:absolute;
top: 35%;
left: 40%;
border:1px solid transparent;
border-radius:8px;
/* background-color: #000000; */
background-color:rgba(0,0,0,0.75);
}
.shixin {
position: relative;
top: 83%;
left: 78%;
width: 0;
height: 0;
transform: rotate(-135deg);
border-width: 9px;
border-color: rgba(0,0,0,0.75) transparent transparent rgba(0,0,0,0.75);
border-style: solid;
border-top-left-radius: 5px;
}
.xie {
position:absolute;
top: -3%;
left: -1%;
width: 50px;
height: 52px;
border-radius: 8px;
/* border:2px solid red; */
background-color: red;
z-index: 9;
clip-path:polygon(0 0, 0 100%, 80% 100%, 90% 0);
}
</style>
</head>
<body>
<div class="container">
<div class="xie">
</div>
<div class="shixin">
</div>
</div>
</body>
</html>