css画三角形和提示框

最新推荐文章于 2025-05-14 17:03:41 发布

转载最新推荐文章于 2025-05-14 17:03:41 发布 · 126 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015739494

本文介绍了一种使用CSS伪元素创建特殊视觉效果的方法——通过叠加两个大小相同的三角形实现独特的显示效果。具体做法是利用边框技巧绘制三角形，并通过微小的位置偏移和颜色对比来营造视觉差。

想要的效果（图片）

利用css伪元素

demo1.gif

原理

两个三角形一样大，位置错开1~2px，第一个红色第二个白色，第二个覆盖第一个
三角形画法，不多说，利用border 和 transparent

上代码

.a::before {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent red transparent;
    position: absolute;
    top: -4px;
    left: 38px;
  }
  .a::after {
    content: "";
    border-width: 0px 4px 4px 4px;
    border-style: solid;
    border-color: transparent transparent white transparent;
    top: -3px;
    left: 38px;
    position: absolute;
  }
  .a {
    position: relative;
    position: relative;
    display: inline-block;
    border: 1px solid red;
    width: 80px;
    height: 20px;
    text-align: center;
  }