用CSS做出三角形

原理

利用border。相鄰邊框之間呈現45度夾角

拿掉border-top,並且將border-bottom的寬度調成2倍大

將此元素的長寬都改成0

最後,把border-right, border-left顏色設成transparent

範例

<div></div>
div {
 width: 0px;
 height: 0px;
 border-right: 30px solid transparent;
 border-left: 30px solid transparent;
 border-bottom: 60px solid #c1d7ae;
}

Display

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *