border-color可以把纖體哦分為四個三角形區域，上 右 下 左，每個區域有一種顏色，如果把其他三個區域設定成透明色，就制作出來一個三角形

border-color:：[ border-top-color ] || [ border-right-color ] || [
border-bottom-color ] || [ border-left-color ] 上 右 下 左

border-color:transparent ?#f4f4f4 transparent transparent;

?

.user-chat-list-body{position: relative;background: #F4F4F4;padding: 25upx;margin-left: 20upx;border-radius: 20upx;margin-right: 100upx; } .user-chat-list-body:after{position: absolute;left: -30upx;right: 0;top: 30upx;content: '';width: 0;height: 0;border: 16upx solid #F4F4F4;border-color: transparent #F4F4F4 transparent transparent; }

?

總結

以上是生活随笔為你收集整理的用border-color 的 transparent 制作一个三角形的全部內容，希望文章能夠幫你解決所遇到的問題。

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