想要的效果（圖片）

利用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画三角形和提示框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。