CSS三角形自定义边框颜色


114

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

Answers:


185

实际上,您必须用两个三角形来伪造它。

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

在这里更新了小提琴

在此处输入图片说明


1
那很完美!正是我所需要的。谢谢。
Ed R

1
嘿,我不知道如何修改三角形以显示在框的另一侧(我不知道三角形css的工作原理)
凯文(Kevin

1
SMRT-你真聪明!
窃窃私语

5
注意,对于那些与@Kevin相同的问题。查看该border-color属性,取决于三角形将指向不同方向的彩色边框。若要将箭头指向左border-colortransparent #e3f5ff transparent transparent;都更改为.container:after.container:before
rmagnum2002

1
@Scott谢谢你!您的JS小提琴就位了!但是,请注意JSFiddle中的copypasta,它在我的CSS文件中添加了两个不可见和无效的字符,这导致该css文件中的验证/解析错误。一旦我删除了不可见的字符(字符为零宽度,所以光标没有显示它们,但是我能够退格),它就可以很好地工作了。问题不在于您的代码,我认为JS Fiddle在显示的代码中引入了一些神秘的字符?Dunno,但我只是想为后代提及,以防万一有人遇到同一问题。
hypervisor666

91

我知道您接受这一点,但也可以用更少的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/


嘿,我不知道如何修改三角形以显示在框的另一侧(我不知道三角形css的工作原理)
凯文(Kevin

2
@Kevin我创建了这个,请检查jsfiddle.net/4ZeCz/97。尝试使用我已经使用过的属性,如果您有任何问题可以问我:)
sandeep

3
一种解释:这将创建一个法线正方形元素,在两个相邻边上带有边框,从而形成一个倾斜的三角形。然后将正方形倾斜45度,使三角形指向上方(或您想要的任何位置)。顺便说一句,您-webkit-现在只需要前缀(-ms-对于IE9)。所有其他浏览器均无前缀支持。
rvighne 2014年

非常聪明的解决方案!谢谢。
索尔汉(Solhan)'18年

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>


1

完成此操作的另一种方法,尤其是对于需要像我这样处理等边三角形甚至斜角三角形的人来说,是使用filter: drop-shadow(...)多个值且没有模糊半径。这具有不需要多个元素,或获得额外的好处:前:后(我试图用做到这一点:这是内嵌的内容,所以要避免绝对定位太后)。

对于上述情况,: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中看起来不错)
  • 我不太确定为什么上面<offset-y>第二个drop-shadow()中的.5px 值看起来比1px看起来更像1px,尽管我想它与三角学有关(尽管至少在我的显示器上我看不到两者之间没有区别)实际基于触发的值,或者说.5px甚至.1px)。
  • 大于1px的边框(看起来像那样)似乎效果不佳。或至少我还没有找到解决方案,不过下面介绍了一种不太理想的方法来扩大规模。(我认为<spread-radius>drop-shadow()的文档化但不受支持的第4个参数()可能是我真正想要的,而不是多个过滤器值,但是将其添加进去只是使事情完全破裂。)在这里您可以看到什么超过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>

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

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

其中第一个设置了模糊半径(在这种情况下为2.5px,尽管结果看起来成倍增加了),其余所有的模糊都设置为0。但这仅适用于所有颜色相同的颜色,并且结果在某些圆角以及相当粗糙的边缘上,您走的越大。


0
.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;
}
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.