首先,我们要会先实现一个小三角形;
思路:利用元素的 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>