CSS 三角形自定义边框颜色

尝试为 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;
}​

我的小提琴: http://jsfiddle.net/4ZeCz/

166135 次浏览
小开
最佳答案

你必须用两个三角形来假装。

.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;
}

更新小提琴

enter image description here

小开

我知道你接受这一点，但检查这一个也较少的 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);
}

Http://jsfiddle.net/4zecz/3/

小开

我认为这是一个使用 剪切路径的简单方法:

.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>

小开 
.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;
}
小开

另一种实现这一点的方法，特别是对于那些需要使用等边三角形甚至像我这样的不等边三角形的人来说，就是使用具有多个值和没有模糊半径的 filter: drop-shadow(...)。这样做的另一个好处是不需要多个元素，也不需要访问 都有: before 和: after (我试图使用: after 内联的内容来完成这项工作，因此也希望避免绝对定位)。

对于上面的情况，: 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>

不过，我认为还是有一些 limitations或者说奇怪的地方:

  • 不支持 IE11(尽管在 FF、 Chrome 和 Edge 中看起来不错)
  • 我不太确定为什么。5像素的 <offset-y>值在第二个下拉-shadow ()上面看起来更像1px 而不是1px，虽然我认为它与三角学有关(虽然至少在我的显示器上我看不到实际的基于三角形的值之间的差异，或者.5像素甚至.1像素)。
  • 大于1px 的边框(好吧，它们的外观是这样的)看起来效果不好。或者至少我还没有找到解决方案，尽管看看下面的一个不太理想的方法去更大一点。(我认为，drop-shadow ()的第4个参数(<spread-radius>)虽然有文档记录，但是不受支持，这可能是我真正想要的，而不是多个过滤器值，但是把它添加进去就完全破坏了这个过滤器值。)这里你可以看到当超过1px (小提琴)时会发生什么:

.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>

注意，有趣的是，第一个(绿色)被应用了一次，但是第二个(红色)被同时应用到通过边框创建的黄色三角形和绿色的投影() ，而最后一个(蓝色)被应用到以上所有三角形。(也许这也与0.5像素的外观有关)。

但是我想你可以利用这些阴影建立在彼此之上的优势，如果你需要一些比1px 更宽的外观，通过改变他们像下面这样的东西(小提琴) :

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.


提交答案