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;} <span class="a">12</span>

总结

以上是生活随笔为你收集整理的css画三角形和提示框的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。