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

使用CSS绘制三角形 <div class="highlight highlight-text-html-basic notranslate position-

<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clip

第十三题：如何用 CSS 画三角形 about daily HOT 3 OPEN

ray-56 commented on August 13, 2024

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

from daily.

Comments (3)

GenXiaoLe commented on August 13, 2024

使用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边颜色设置为白色或透明色即可。

from daily.

lamelamb commented on August 13, 2024

利用 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;
}

from daily.

MMmaXingXing commented on August 13, 2024

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

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

from daily.

Recommend Projects

第十三题：如何用 CSS 画三角形 about daily HOT 3 OPEN

Comments (3)

使用CSS绘制三角形

原理

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent