利用CSS border設計三角形

發表於 更新於 分類於

border有哪些屬性？

設計border樣式時，常會直接寫下border :1px solid #000，但這些屬性值個代表甚麼意思？

參考w3school的介紹

The border property is a shorthand property for the following individual border properties:

  • border-width
  • border-style (required)
  • border-color

利用border做三角形及箭頭

明白了border縮寫的值各自代表的意思後，再來看看下面這段程式碼顯示出來的結果。

1
2
3
4
5
6
7
8
.border
    width: 30px
    height: 30px
    background: white
    border-top: 15px solid #000
    border-right: 15px solid green
    border-bottom: 15px solid yellow
    border-left: 15px solid purple

發現了奇怪的事情，原來border並不是長方形(或正方形)，而是梯形，這是在中間內容區塊有設定大小的情況，接下來把中間內容區塊寬高改為0試試。

1
2
3
4
5
6
7
8
.border-0
    width: 0px
    height: 0px
    background: white
    border-top: 15px solid #000
    border-right: 15px solid green
    border-bottom: 15px solid yellow
    border-left: 15px solid purple

中間內容區塊寬高改為0之後，發現了4邊的border變成了三角形，而這個就是我們需要的三角形。接下來就是要選擇1個三角形並想辦法將其他border變不見。

接下來只留紫色三角形的方法，就是把其他區塊顏色變成透明(transparent)。

1
2
3
4
5
6
7
8
.border-0
    width: 0px
    height: 0px
    background: white
    border-top: 15px solid transparent
    border-right: 15px solid transparent
    border-bottom: 15px solid transparent
    border-left: 15px solid purple

就這樣三角形出來了，疑惑的是到底要怎麼將這個三角形變形，總想設計一個狹長的三角形或不等腰三角形之類的。

Chris Coyier的CSS Triangle介紹：Animation to Explain CSS Triangles

改變三角形的形狀

設定每個三角形的數值

以紫色三角形(border-left)為例，是不適覺得另外三個三角形都沒有，為什麼還要寫下他們的程式碼，感覺很多餘。其實他們並不是沒作用，他們的作用是形成三角形的底(相反方向的border是真的沒作用啦！)

以圖來解釋這個紫色三角形的寬高是怎麼來的。

三角形左右2側的border-width就是形成三角形底的關鍵，所以想設定不等腰三角形，就去更改三角形左右2側的border-width就可以了！

以紫色三角形為例，把它改為不等腰三角形，就是把border-top跟border-bottom改成不一樣的數字即可。

利用三角形創造箭頭

先創造一個有寬高及背景的元素，再利用偽元素:before或是:after創造出在元素前或後的箭頭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.cart {
  width: 50px;
  height: 5px;
  background: red;
  position: relative;
}

.cart:before {
  width: 0;
  height: 0;
  border-left: 15px solid green;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: "";
  position: absolute;
  right: -15px;
  top: -7.5px;//讓元素剛好在三角形中間(三角形底-元素高)
}