CSS是一種常用的網頁樣式設計語言,其中畫三角形也是常見操作。以下介紹CSS畫三角形的幾種方法:
/* 1. 使用 border */ .triangle1 { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } /* 2. 使用偽元素 */ .triangle2 { width: 0; height: 0; position: relative; } .triangle2::before { content: ""; position: absolute; top: 0; left: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } /* 3. 使用 transform */ .triangle3 { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; transform: rotate(45deg); } /* 4. 使用 clip-path */ .triangle4 { width: 100px; height: 100px; background-color: red; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); }
以上就是CSS畫三角形的幾種方法,可以根據實際需求選擇使用。
上一篇mysql 集群 ha