CSS 如何绘制带有边框的透明背景三角形？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8264110/
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 to draw triangle with transparent background with border?
提问by Houston
I would like to know how to draw a triangle with a transparent background with borders? The examples I had found do not provide borders. Any way to accomplish this?
我想知道如何绘制一个带边框的透明背景的三角形？我发现的例子不提供边界。有什么办法可以做到这一点吗？
采纳答案by bookcasey
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position:relative;
}
.triangle:after{
content:'';
position:absolute;
top:5px;
left:-45px;
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 92px solid white;
}
回答by creme
Here's a transparent pure css triangle with borders:
这是一个带边框的透明纯 css 三角形：
.container {
width: 200px;
height: 200px;
position: relative;
border-top: 4px solid #e74c3c;
}
.triangle {
position: absolute;
margin: auto;
top: -70px;
left: 0;
right: 0;
width: 137px;
height: 137px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 4px solid #e74c3c;
border-bottom: 4px solid #e74c3c;
}
回答by alexdets
It triangle with a transparent background, borders you can do using two of these one above the other http://jsfiddle.net/alexdets/vYAZQ/26/
它具有透明背景的三角形，您可以使用其中两个在另一个之上的边框 http://jsfiddle.net/alexdets/vYAZQ/26/
回答by Diodeus - James MacFarlane
Absolutely position a slightly smaller triangle on an existing one.
在现有的三角形上绝对放置一个稍小的三角形。
