CSS實現三角形

時間 2020-08-02

標籤 css 實現三角形欄目 CSS 简体版

原文原文鏈接

　　畫一個三角形，笨重一點的方法是使用CSS3的旋轉以及定位技術，經過覆蓋的方式來刻畫三角形，可是還有一個簡單的方式來實現。html

　　下面所使用的方式是利用了當盒子的content、padding都爲零的時候，盒子的邊框會呈現三角形結合。以下：spa

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         #triangle02{
 9         width: 0;
10         height: 0;
11         border-top: 50px solid blue;
12         border-right: 50px solid red;
13         border-bottom: 50px solid green;
14         border-left: 50px solid yellow;
15         }
16     </style>
17 </head>
18 <body>
19     <div id="triangle02"></div>
20 </body>
21 </html>

相關標籤/搜索