Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
Ray-56 opened this issue Aug 23, 2019 · 3 comments
Open

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

Ray-56 opened this issue Aug 23, 2019 · 3 comments
Labels
CSS 层叠样式表

Comments

@Ray-56
Copy link
Owner

Ray-56 commented Aug 23, 2019

如何用 CSS 画三角形？及其原理
@Ray-56 Ray-56 added the CSS 层叠样式表 label Aug 23, 2019
@Ray-56 Ray-56 changed the title 第十二题：如何用 CSS 画三角形 第十三题：如何用 CSS 画三角形 Aug 23, 2019
@GenXiaoLe
Copy link
Collaborator

使用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
Copy link

利用 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
Copy link 

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
CSS 层叠样式表
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@Ray-56 @MMmaXingXing @lamelamb @GenXiaoLe