用CSS製作三角形.

東方來客發表於2018-06-24
原文網址 : https://juejin.im/post/5b2ef62be51d4558dd698e0f
CSS

一. 三角形的製作

這裡採用的方法是利用border的上下左右邊框的收縮.

html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>triangle</title>
</head>
<body>
  <div class = 'triangle'>
  </div>
</body>
</html>
複製程式碼

css部分

.triangle{
  height:20px;
  width:20px;
  border-top:10px solid grey;
  border-right:10px solid pink;
  border-bottom:10px solid blue;
  border-left:10px solid yellowgreen ;
}
複製程式碼

此時達到的效果如下

用CSS製作三角形.
如何讓他變成一個三角形呢?很簡單,消滅他的寬高就行啦

用CSS製作三角形.
嗯...看來還差點.那就讓右和下邊框也消失掉吧

  .triangle{
  height:0px;
  width:0px;
  border-top:10px solid yellowgreen;
  border-right:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:10px solid yellowgreen;
}
複製程式碼

大功告成

用CSS製作三角形.

相關文章