CSS 三角形自定义边框颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9450733/
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
CSS triangle custom border color
提问by Ed R
Attempting to use a custom hex color for my css triangle (border). However since it uses border properties I am unsure how to go about doing this. I would like to steer clear of javascript and css3 simply because of compatibility. I am trying to have the triangle have a white background with a 1px border (around the angled sides of the triangle) with color #CAD5E0. Is this possible? Here's what I have so far:
尝试为我的 css 三角形（边框）使用自定义的十六进制颜色。但是，由于它使用边框属性，我不确定如何执行此操作。仅仅因为兼容性，我想避开 javascript 和 css3。我试图让三角形有一个白色背景，带有 1px 边框（围绕三角形的斜边），颜色为 #CAD5E0。这可能吗？这是我到目前为止所拥有的：
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}?
My fiddle: http://jsfiddle.net/4ZeCz/
我的小提琴：http: //jsfiddle.net/4ZeCz/
回答by Scott
You actually have to fake it with two triangles....
你实际上必须用两个三角形来伪造它......
.container {
margin: 15px 30px;
width: 200px;
background: #fff;
border: 1px solid #a00;
position: relative;
min-height: 200px;
padding: 20px;
text-align: center;
color: #fff;
font: bold 1.5em/180px Helvetica, sans-serif;
text-shadow: 0 0 1px #000;
}
.container:after,
.container:before {
content: '';
display: block;
position: absolute;
left: 100%;
width: 0;
height: 0;
border-style: solid;
}
.container:after {
top: 10px;
border-color: transparent transparent transparent #fdd;
border-width: 10px;
}
.container:before {
top: 9px;
border-color: transparent transparent transparent #a00;
border-width: 11px;
}
回答by sandeep
I know you accept that but check this one also with less css:
我知道你接受这一点，但也用更少的 css 来检查这个：
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
right:-7px;
width: 10px;
height: 10px;
background: #FFFFFF;
border-right:1px solid #CAD5E0;
border-bottom:1px solid #CAD5E0;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
回答by lalengua
I think this is a simpler one using clip-path:
我认为这是一个更简单的使用clip-path：
.container {
width: 150px;
min-height: 150px;
background: #ccc;
padding: 8px;
padding-right: 6%;
display: inline-block;
clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%);
}<div class="container">
test content
</div>回答by Max Starkenburg
Another way to accomplish this, especially for somebody who needs this to work with equilateral or even scalene triangles like I did, is to use filter: drop-shadow(...)with multiple values and no blur radius. This has the added benefit of not needing multiple elements, or access to both:before and :after (I was trying to accomplish this with :after content that was inline, so wanted to avoid absolute positioning too).
实现这一点的另一种方法，特别是对于像我一样需要它来处理等边甚至不等边三角形的人，是使用filter: drop-shadow(...)多个值并且没有模糊半径。这具有不需要多个元素，或获得额外的好处都：前：后（我试图用做到这一点：这是内嵌的内容，所以要避免绝对定位太后）。
For the above case, the :after's CSS could look like this (fiddle):
对于上述情况，:after 的 CSS 可能如下所示（小提琴）：
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}<div class="container">
Test Container
</div>I think there are some limitationsor weirdness, though:
不过，我认为有一些限制或奇怪之处：
- No support in IE11 (though seems fine in FF, Chrome, and Edge)
- I'm not quite sure why .5px for the
<offset-y>value in the second drop-shadow() above appears more like 1px than 1px would have, though I imagine it's related to trigonometry (though at least on my monitor I see no difference between the actual trig-based values or .5px or even .1px for that matter). - Borders greater than 1px (well, their appearance that way) don't seem to work well. Or at least I haven't found the solution, though see below for a less-than-optimal way to go a little bigger. (I would think the documented-but-unsupported 4th parameter (
<spread-radius>) of drop-shadow() might be what I'm really looking for instead of multiple filter values, but adding it in just broke things entirely.) Here you can see what starts to happen when going beyond 1px (fiddle):
- 不支持 IE11（虽然在 FF、Chrome 和 Edge 中看起来不错）
- 我不太确定为什么上面
<offset-y>第二个 drop-shadow() 中的值的.5px看起来更像是 1px 而不是 1px，尽管我认为它与三角学有关（尽管至少在我的显示器上我看不到两者之间的区别）实际基于触发的值或 .5px 甚至 .1px 就此而言）。 - 大于 1px 的边框（好吧，它们的外观就是这样）似乎效果不佳。或者至少我还没有找到解决方案，尽管请参阅下面的不太理想的方式来扩大规模。（我认为
<spread-radius>drop-shadow()的记录但不受支持的第 4 个参数 ( ) 可能是我真正要寻找的，而不是多个过滤器值，但将其添加到完全破坏了事情。）在这里你可以看到什么当超过 1px ( fiddle)时开始发生：
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}<div class="container">
Test Container
</div>Notice the funniness that the first one (green) gets applied once, but the second one (red) is getting applied both to the yellow triangle created via border as well as the green drop-shadow(), and the last one (blue) gets applied to all of the above. (Perhaps that's also related to the .5px appearance thing).
注意有趣的是，第一个（绿色）被应用一次，但第二个（红色）同时被应用到通过边框创建的黄色三角形以及绿色阴影（），以及最后一个（蓝色）应用于上述所有内容。（也许这也与 .5px 外观有关）。
But I guess you can take advantage of these drop-shadows building on each other if you need something wider-looking than 1px, by changing them to something like the following (fiddle):
但是我想如果你需要比 1px 更宽的东西，你可以利用这些相互叠加的阴影，通过将它们更改为如下所示（fiddle）：
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
where the very first one has a blur-radius set (2.5px in this case, though the result appears multiplied), and all the rest have blur at 0. But this will only work for the same color on all sides, and it results in some rounded-looking corners as well as quite rough edges the bigger you go.
其中第一个设置了模糊半径（在这种情况下为 2.5px，尽管结果看起来是成倍的），而其余所有的模糊为 0。但这仅适用于所有边的相同颜色，结果在一些看起来圆润的角落以及相当粗糙的边缘中，你变得越大。
回答by Sharan
.triangle{
position: absolute;
width:0px;
height:0px;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 72px solid #DB5248;
}
.triangle:after{
position: relative;
content:"!";
top:8px;
left:-8px;
color:#DB5248;
font-size:40px;
}
.triangle:before{
content:".";
color: #DB5248;
position: relative;
top:-14px;
left:-43px;
border-left: 41px solid transparent;
border-right: 41px solid transparent;
border-bottom: 67px solid white;
}
