效果图(如图):
代码如下:`.box {
margin: 40px;
position: relative;
width: 200px;
height: 34px;
-webkit-filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
background: linear-gradient(90deg,
rgba(0, 242, 253, 0.27) 0%,
rgba(68, 229, 242, 0) 100%);
}
.box[data-box-arrow]:before,
.box[data-box-arrow]:after {
content: "";
position: absolute;
border-style: solid;
border-width: 17px;
border-color: transparent;
}
.box[data-box-arrow="left"]:before,
.box[data-box-arrow="left"]:after {
right: 100%;
top: 0;
}
.box[data-box-arrow="left"]:before {
/* border-right-color: #bbb; */
}
.box[data-box-arrow="left"]:after {
/* border-right-color: #fff; */
border-right-color: rgba(0, 242, 253, 0.27)
/* background-color: rgba(0, 242, 253, 0.27); */
}`
html结构:
<div class="box" data-box-arrow="left">
</div>