如何在 HTML 中制作三角形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12483178/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a triangle in HTML?
提问by Ali
I want to use basic CSS to make triangle in an HTML page. I am using triangle pics which take time to load, so, I want to decrease loading time of my page.
我想使用基本的 CSS 在 HTML 页面中制作三角形。我正在使用需要时间加载的三角形图片，因此，我想减少页面的加载时间。
回答by Nikola K.
Not possible with HTML, but with CSS. Example:
用 HTML 不可能，但用 CSS 不可能。例子：
<div class="triangle></div>
.triangle {
width: 0;
height: 0;
border: solid 30px;
border-color: transparent transparent black transparent;
}
Live demo: jsFiddle
现场演示：jsFiddle
30pxin theborderproperty defines the size: width and height. You can change it if you want a smaller or a bigger triangle.- if you want to rotate the triangle, switch the position of
blackandtransparentin theborder-colorproperty. See jsFiddle
30px在border属性中定义大小：宽度和高度。如果你想要一个更小或更大的三角形，你可以改变它。- 如果你想旋转的三角形，开关的位置
black，并transparent在border-color财产。见jsFiddle
回答by Juan Mendes
This is the best explanation on how to create CSS triangles: http://www.uselesspickles.com/triangles/
这是关于如何创建 CSS 三角形的最佳解释：http: //www.uselesspickles.com/triangles/
By creating divs without width or height, the borders end up creating a triangle when you leave some of the borders as transparent.
通过创建没有宽度或高度的 div，当您将某些边框保留为透明时，边框最终会创建一个三角形。
CreditThat page was written by a co-worker, way before other people figured out this trick.
信用该页面是由同事编写的，早在其他人想出这个技巧之前。
#tri {
width: 0;
height: 0;
border-top-width: 20px;
border-top-style: solid;
border-top-color: transparent;
border-right-width: 20px;
border-right-style: solid;
border-right-color: red;
}<div id="tri"></div>回答by mtk
The trick behind making a css triangle is
制作 css 三角形背后的技巧是
- Create an empty
div - Make its height and width 0.
- Give 2 opposite sides same border-width and make them transparent.
- Give the third one same border-width, give it a solid color.
- 创建一个空
div - 使其高度和宽度为 0。
- 给 2 个相对的边相同的边框宽度并使它们透明。
- 给第三个相同的边框宽度，给它一个纯色。
Hope this helps.
希望这可以帮助。
Check this jsFiddle
检查这个jsFiddle
回答by Jak
This will make a triangle
这将形成一个三角形
<svg width="100" height="100">
<polygon points="50, 50, 100, 100, 0, 100" fill="yellow" />
</svg>
