先上圖看效果

1.三角形怎么畫

通過控制四周邊框實現,想要紅色區域三角形的就設置其他三邊顏色設置為transparent,想要什么什么三角形就其他邊設置為透明顏色即可.

2.三角形畫好后,利用偽類,定位實現帶三角對話框效果

3.實現陰影效果,因為三角形視覺看上去是三角形,但其實是矩形,直接給加box-shadow實現不了三角形的,

解決辦法:再加一個偽類,設置他的顏色為陰影的顏色,然后利用定位差覆蓋實現陰影效果

總結

以上是生活随笔為你收集整理的css画三角形以及实现带三角的阴影效果的全部內容，希望文章能夠幫你解決所遇到的問題。

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