Question

尝试为我的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/

Answer 1

你实际上必须用两个三角形伪造它......

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

Updated Fiddle here

Answer 2

我知道你接受了这个，但也用较少的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/

Answer 3

我认为使用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>

Answer 4

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

Answer 5

另一种实现此目的的方法，特别是对于需要像我这样处理等边三角形或斜角三角形的人来说，是使用filter: drop-shadow(...)并使用多个值且没有模糊半径。这具有不需要多个元素或无需访问 both ：before和：after的额外好处（我试图通过内联的：after内容来实现这一点，因此也希望避免绝对定位）。

对于上述情况，：after的CSS可能看起来像这样（fiddle）：

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

我认为有一些局限性或怪异之处，

IE11不支持（尽管在FF，Chrome和Edge中看起来不错）
我不太确定为什么上面第二个drop-shadow（）中<offset-y>值的.5px看起来比1px看起来更像1px，尽管我想它与三角学有关（尽管至少在在我的显示器上，我看不到基于触发的实际值或.5px甚至.1px之间的差异）。
大于1像素的边框（嗯，以这种方式出现）似乎效果不佳。或至少我还没有找到解决方案，不过下面介绍了一种不太理想的解决方案。（我认为drop-shadow（）的文档化但不受支持的第4个参数（<spread-radius>）可能是我真正想要的，而不是多个过滤器值，但将其添加进去完全破坏了。）在这里，您可以看到超出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>

请注意，第一个（绿色）被应用一次，但第二个（红色）被应用到通过边框创建的黄色三角形以及绿色的drop-shadow（）和最后一个被应用的乐趣。（蓝色）应用于以上所有内容。（也许这也与.5px外观有关）。

但是我想，如果您需要比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);

其中第一个设置了模糊半径（在这种情况下为2.5px，尽管结果看起来是成倍增加的），其余所有模糊都设置为0。但这仅适用于所有面的相同颜色，并且它会产生一些圆角以及较大的边缘。

CSS三角形自定义边框颜色

5 个答案: