css画三角形和提示框

缓缓

想要的效果(图片)

clipboard.png

利用css伪元素

demo1.gif
clipboard.png

原理

两个三角形一样大,位置错开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;
  }
<span class="a">12</span>
阅读 945

掰玉米基地
前端学习记录
1.3k 声望
60 粉丝
0 条评论
你知道吗?

1.3k 声望
60 粉丝
文章目录
宣传栏