CSS實現等邊三角形

先來看張圖吧

聰明的你應該已經看出來了，border的邊框是由四個三角形組成的，接下來我們就使用這一原理來實現等邊三角形吧~

1.首先創建一個帶邊框的div

 <div class="triangle">
  </div>

  <style>
 .triangle {
      width: 50px;
      height: 50px;
      border-width: 50px;
      border-style: solid;
      border-color: red green blue brown;

  </style>

2.將div的寬高設置為0

  <style>
    .triangle {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: red green blue brown;
    }
  </style>

3。將其他的三個邊框給取消

  <style>
    .triangle {
      width: 0;
      height: 0;
      border-width: 50px;
      border-style: solid;
      border-color: red transparent transparent transparent;
    }
  </style>

你或許有個疑問？為什么你的三角形是倒着的？我想讓他正過來怎么辦。接下來，咱們分析者一個屬性

border-color:  transparent transparent  red transparent; 

上右下左的順序來控制四個邊框，隱藏某邊框就設置transparent,顯示某邊框就寫個顏色就可以啦~

比如上面的屬性就可以使三矯正正過來了~