search

Ray-56 / Daily

每日
7 stars 1 forks source link

第十三题：如何用 CSS 画三角形 #13

Open Ray-56 opened 5 years ago

Ray-56 commented 5 years ago

如何用 CSS 画三角形？及其原理

GenXiaoLe commented 5 years ago

使用CSS绘制三角形

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

<style>
.triangle{
  width: 0;
  height: 0;
  border-top: 10px solid red;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
</style>

原理

虽然我们平时使用border的时候，看起来只是给DOM元素加上了一个外边框，像是由矩形组成。实际上，元素的border是由三角形组合而成。所以由此得出，如果我们需要绘制三角形的话，只需要把某一个边给了颜色，剩余的border边颜色设置为白色或透明色即可。

lamelamb commented 5 years ago

利用 css border均分 特性，将一个容器的边框设置为宽度病设置一个颜色， 隐藏相邻和对边的border(color 设置 transparent 或者border-width 设为0)，就可以绘制成功三角形（等腰），三角形的高为border-width;，比如绘制一个底边三角形， div{ width:0px; height:0; border:50px solid black; border-top-color:transparent; border-left-color:transparent; border-right-color:transparent; }

要绘制直角三角形，可以隐藏2个部分，比如得到有个直角为右下方的直角，可以隐藏左边框和上边框，代码如下 div { width:0px; height:0; border:50px solid black; border-top-color:transparent; border-left-color:transparent; }

MMmaXingXing commented 5 years ago 
<body>
    <div class="triangle"></div>
</body>

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