css 實現各種基本圖形-css教學-PHP中文網

三角形

寫css 的時候，用慣了背景圖，忽略了css 本身其實可以實現很多簡單的基本圖形，比如三角形：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

登入後複製

效果圖：

css 实现各种基本图形

思不得寬百思不得寬百思不得寬百思不得寬百思不得寬。高為0，卻能顯示一個三角形？平常的邊框，看起來都是四條直線，其實不然，修改三角型代碼，展示其兩條邊為例：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

登入後複製

效果圖：

css 实现各种基本图形

恍然大悟，原來邊框其實是等腰梯！

那麼還可以做其他哪些圖形（以下程式碼摘自 the shapes of css）？

圓形

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

登入後複製

主要利用了 border-radius 屬性，將矩形圓角化。其值可以使用長度（px），也可以使用百分比。百分比會轉換成長度，比如此例中，50% 表示 水平圓角半徑=寬度*50%，垂直圓角半徑=高度*50%所以直接寫 100px 也是等價的。

平行四邊形

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

登入後複製

利用transform 傾斜特性如下：

向x軸方向（水平向右）傾斜160°：可沿著矩形方向旋轉160° （當旋轉90° 時，四條邊重合，圖形會消失；當旋轉超過90° 時，類似對稱；當旋轉超過180° 時，便類似轉圈了）
向y 軸方向（水平向下）傾斜，可以想像為矩形底邊順時針方向旋轉。

五角形

是時候提高下難度了，我們來看看怎麼畫五角形⭐️？五角星可以看成是由三個等腰三角形組成。

css 实现各种基本图形

三角形三個角分別是 36°、36°、108°，此時畫五角星等價於畫三個三角形。文章開頭提到的方法只能畫角度固定的等腰三角形。仔細研究下border，其實角度是可控制的，如下圖所示：

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

登入後複製

css 实现各种基本图形

透過給邊框設定不同的長度，會影響到邊框的形狀：以上圖紅色三角形為例它的底邊長為border-left + border-right；高中學習的餘弦定理得知：透過已知三角形的角度和任意一邊的長度，可以確定三角形的形狀。所以理論上，控制一個 p 三條 border 的長度，進而實現不同大小的三角形是可行。實踐了一番，由於很難得到一個整數值，所以透過這種方法畫正五角形幾乎是無法實現的。

原文的程式碼如下（很驚訝原作者是如何算出來這些邊框寬度的）：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

登入後複製

其他有趣的圖形

鑽石

css 实现各种基本图形

和一個三角形組合而成豆人

一個圓形，隱藏右側邊 css 实现各种基本图形

對話框

一個三角形，加一個圓角矩形 css 实现各种基本图形

圖，忽略了css 本身其實可以實現很多簡單的基本圖形，像是三角形：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 transparent transparent;
    width: 0px;
    height: 0px;
}

登入後複製

效果圖：

百思不得qijie，为啥宽高为 0，却能显示一个三角形？平常的边框，看上去都是四条直线，其实不然，修改三角型代码，展示其两条边为例：

.triangle {
    border-style: solid;
    border-width: 20px;
    border-color: #000 blue transparent transparent;
    width: 50px;
    height: 50px;
}

登入後複製

效果图：

css 实现各种基本图形

恍然大悟，原来边框其实是等腰梯形！

那么还可以做其他哪些图形（以下代码摘自 the shapes of css）？

圆形

css 实现各种基本图形

#circle {
    width: 200px;
    height: 200px;
    background: red;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

登入後複製

主要利用了 border-radius 属性，将矩形圆角化。其值可以使用长度（px），也可以使用百分比。百分比会转化成长度，比如此例中，50% 表示 水平圆角半径=宽度*50%，垂直圆角半径=高度*50%所以直接写 100px 也是等价的。

平行四边形

css 实现各种基本图形

#parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(160deg);
       -moz-transform: skew(160deg);
         -o-transform: skew(160deg);
    background: red;
}

登入後複製

利用 transform 倾斜特性如下：

向x轴方向（水平向右）倾斜 160°：可以想象为矩形的右侧边沿着逆时针方向旋转 160°（当旋转 90° 时，四条边重合，图形会消失；当旋转超过 90° 时，类似对称；当旋转超过 180° 时，便类似转圈了）
向 y 轴方向（水平向下）倾斜，可以想象为矩形底边沿着顺时针方向旋转。

五角形

是时候提高下难度了，我们来看下怎么画五角形⭐️？五角星可以看成是由三个等腰三角形组成。

css 实现各种基本图形

三角形三个角分别是 36°、36°、108°，此时画五角星等价于画三个三角形。文章开头提到的方法只能画角度固定的等腰三角形。仔细研究下 border，其实角度是可控的，如下所示：

  width: 10px;
  height:10px;
  border-right:  100px solid green;
  border-bottom: 70px  solid red;
  border-top: 20px  solid blue;
  border-left:   50px solid black;

登入後複製

css 实现各种基本图形

通过给边框设置不同的长度，会影响到边框的形状：以上图红色三角形为例它的底边长为 border-left + border-right；高中学习的余弦定理得知：通过已知三角形的角度和任意一边的长度，可以确定三角形的形状。所以理论上，通过控制一个 p 三条 border 的长度，进而实现不同大小的三角形是可行。实践了一番，由于很难得到一个整数值，所以通过这种方法画正五角形几乎是无法实现的。

原文的代码如下（很惊讶原作者是如何算出来这些边框宽度的）：

#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  100px solid transparent;
   border-bottom: 70px  solid red;
   border-left:   100px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 80px solid red;
   border-left: 30px solid transparent;
   border-right: 30px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -45px;
   left: -65px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -105px;
   width: 0px;
   height: 0px;
   border-right: 100px solid transparent;
   border-bottom: 70px solid red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}

登入後複製