css 写带三角形的对话框，空心的三角形边框

最新推荐文章于 2025-03-24 00:59:30 发布

原创最新推荐文章于 2025-03-24 00:59:30 发布

· 630 阅读

1 ·

版权

文章标签：

#css #前端 #javascript

本文介绍了如何使用CSS的border属性和伪类，结合透明度和z-index，创建视觉上的三角形效果。通过span元素和其伪元素的配合，实现在div中的三角形选择器设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，我们要会先实现一个小三角形；

思路：利用元素的 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>