Html 如何制作具有白色中心的纯css三角形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9489590/
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 make a pure css triangle which has a white center
提问by Evan
I want to create an upward and downward facing arrow with css like the following: http://apps.eky.hk/css-triangle-generator/
我想用 css 创建一个向上和向下的箭头，如下所示：http: //apps.eky.hk/css-triangle-generator/
However, instead of a solid color, I want to set it up so the inside is white and there is just a border around the triangle. (So the triangle would be multi-colored, one color on the inside and a different colored border).
但是，我想将其设置为内部为白色，并且三角形周围只有一个边框，而不是纯色。（所以三角形将是多色的，内侧是一种颜色，边框是不同颜色的）。
Is this possible, and if so, how can it be done?
这可能吗，如果可以，怎么做？
回答by Jasper
To create triangles with only CSS we use a zero width/height element with borders:
要仅使用 CSS 创建三角形，我们使用带边框的零宽度/高度元素：
.arrow-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
Since we are using borders to create the arrow, we can't just give it a border, but we can overlay one arrow on top of a slightly larger arrow to make the appearance of a border:
因为我们使用边框来创建箭头，所以我们不能只给它一个边框，但我们可以将一个箭头叠加在一个稍大的箭头上，以形成边框的外观：
HTML --
HTML --
<div class="top"></div>
<div class="bottom"></div>?
CSS --
css --
.top {
position : absolute;
top : 6px;
left : 10px;
width : 0;
height : 0;
z-index : 100;
border-left : 50px solid transparent;
border-right : 50px solid transparent;
border-bottom : 50px solid black;
}
.bottom {
position : absolute;
width : 0;
height : 0;
z-index : 99;
border-left : 60px solid transparent;
border-right : 60px solid transparent;
border-bottom : 60px solid red;
}?
Here is a demo: http://jsfiddle.net/jasper/qnmpb/1/
这是一个演示：http: //jsfiddle.net/jasper/qnmpb/1/
Update
更新
You can then put both of the triangle DIV elements inside a container and move that container however you want:
然后，您可以将两个三角形 DIV 元素放入一个容器中，并根据需要移动该容器：
HTML --
HTML --
<div id="container">
<div class="top"></div>
<div class="bottom"></div>
</div>
CSS --?
CSS——？
#container {
position : relative;
top : 25px;
left : 25px;
}
Here is a demo: http://jsfiddle.net/jasper/qnmpb/3/
这是一个演示：http: //jsfiddle.net/jasper/qnmpb/3/
EDIT (2014):
编辑（2014）：
I just came back to this answer and noticed that separate HTML elements are not necessary to create your double-triangle. You can use pseudo-elements, :beforeand :after. I.e. replace the .topselector with something like .my-element-that-needs-a-triangle:beforeand the .bottomselector with something like .my-element-that-needs-a-triangle:after.
我刚刚回到这个答案并注意到创建双三角形不需要单独的 HTML 元素。您可以使用伪元素:before和:after. 即更换.top的东西，如选择.my-element-that-needs-a-triangle:before和.bottom喜欢的东西选择.my-element-that-needs-a-triangle:after。
回答by Luke
I think you could get a good idea of what to do by checking out this tutorial on pure css thought bubbles. It's doing what you're looking for.
我认为您可以通过查看有关纯 css 思想泡泡的教程来了解该怎么做。它正在做你正在寻找的东西。
回答by ThinkingStiff
Depending on how you're using it, you can make a triangle, with a border and even box shadow, without the triangle border hack, using CSS transform: rotate(). See my answer here: https://stackoverflow.com/a/8867645/918414
根据您使用它的方式，您可以使用 CSS 制作一个带有边框甚至框阴影的三角形，而无需三角形边框黑客transform: rotate()。在此处查看我的答案：https: //stackoverflow.com/a/8867645/918414
回答by pmrotule
If you want to create a triangle with borders (or box shadow look-alike) in pure CSS, you should use pseudo-elements :beforeand :after.
如果你想在纯 CSS 中创建一个带边框（或类似框阴影）的三角形，你应该使用伪元素:before和:after.
In my example, I added display:inline-block;to the element .arrow-dropdownto be able to create some kind of dropdown menu with a drop shadow. It is followed by .arrow-onlywhich is a a basic triangle with a red border.
在我的示例中，我添加display:inline-block;到元素.arrow-dropdown以便能够创建某种带有阴影的下拉菜单。后面跟着的.arrow-only是一个带红色边框的基本三角形。
body {
margin: 10px;
background: #1670c4;
}
.text {
display: inline-block;
font-size: 15px;
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
cursor: default;
}
.arrow-dropdown {
display: inline-block;
position: relative;
vertical-align: middle;
margin: 1px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-dropdown:after {
content: '';
position: absolute;
border-style: solid;
border-width: 7px 4px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-dropdown:before {
content: '';
position: absolute;
border-style: solid;
border-width: 8px 5px 0;
border-color: rgba(0,0,0,0.3) transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
}
.arrow-only {
position: relative;
vertical-align: middle;
margin: 10px 0 0 8px;
width: 8px;
height: 7px;
}
.arrow-only:after {
content: '';
position: absolute;
border-style: solid;
border-width: 12px 9px 0;
border-color: #fff transparent transparent transparent;
display: block;
width: 0;
z-index: 1;
}
.arrow-only:before {
content: '';
position: absolute;
border-style: solid;
border-width: 15px 11px 0;
border-color: #f00 transparent transparent transparent;
display: block;
width: 0;
z-index: 0;
margin:-1px 0 0 -2px;
}<div class="text">
Dropdown text
</div><div class="arrow-dropdown"></div>
<div class="arrow-only"></div>