今天我們介紹幾種，用css實現左上朝向三角形（Top-Left Triangle）的寫法。
示意圖（以寬高各60px為例）：
這種三角形，一般可以用來做“對話框”類型圖形的左下小腳。
第一種：
#triangle-topleft { border: 30px solid #e6686e; height: 0; width: 0; border-right-color: transparent; border-bottom-color: transparent;}第二種：
#triangle-topleft { width: 0; height: 0; border-top: 60px solid #e6686e; border-right: 60px solid transparent;}第三種:
#triangle-topleft { border: 60px solid transparent; width: 0; height: 0; border-left-color: #e6686e; border-top-width: 0;}大家可以嘗試更多種的三角形做法，以及不同朝向的三角形。
這里強烈推薦一個常用css圖形的展示網站：https://css-tricks.com/the-shapes-of-css/
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
