首先,我们要会先实现一个小三角形;
思路:利用元素的 border 属性,将其三个方向的 border-color 值设为透明色(或者和其父元素的背景色一致,形成视觉差,俗称障眼法),剩下一个方向的 border-color 的值即为你需求的三角形的颜色。
重点!!!!!
span 画一个三角形,然后span 的伪类画一个和背景色一样的小一点点的三角形,摞在一起,注意一下z-index,然后就完成啦
<div class="select"><span></span><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div><div class="selectItem">汇总统计</div></div>
<style lang='less' scoped>.select {width: 218px;background: #012e30;box-shadow: 0px 18px 56px 16px rgba(0, 255, 236, 0.05), 0px 12px 32px 0px rgba(0, 255, 236, 0.08),0px 6px 12px -8px rgba(0, 221, 213, 0.12);// opacity: 0.9;border: 2px solid #00ffec;border-radius: 4px;position: absolute;top: 64px;right: 0px;z-index: 2;opacity: 0.9;span {display: block;width: 0;height: 0;border-top: 16px solid transparent;border-right: 16px solid transparent;border-bottom: 16px solid #00ffec;border-left: 16px solid transparent;position: absolute;right: 5px;top: -30px;&::after {content: '';display: block;width: 0;height: 0;border-top: 14px solid transparent;border-right: 14px solid transparent;border-bottom: 14px solid #012e30;border-left: 14px solid transparent;position: absolute;right: -14px;top: -11px;z-index: 3;}}
}
.selectItem {line-height: 56px;padding-left: 12px;font-size: 24px;font-weight: 500;color: #ffffff;
}</style>