logo标签列表

CSS三角形自定义边框颜色

cssbordercss-shapes
126

尝试在我的CSS三角形（边框）中使用自定义十六进制颜色。但由于它使用边框属性，我不确定如何操作。我希望避开JavaScript和CSS3，仅考虑兼容性。我想让三角形具有白色背景和1像素边框（围绕三角形的倾斜侧面），颜色为#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/

5个回答
204

你实际上需要用两个三角形来伪造它....

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

这里是更新的 Fiddle

在此输入图片描述

1
嗨，我不明白如何将三角形修改为出现在盒子的另一侧（我不理解三角形CSS的工作原理）。 - Kevin
5
注意，对于与@Kevin有相同问题的人，请查看border-color属性，根据颜色不同的边框，三角形将指向不同的方向。如果要将箭头指向左侧，请在.container:after和.container:before中将border-color更改为transparent #e3f5ff transparent transparent;。 - rmagnum2002
1
@Scott 谢谢你！你的 JS Fiddle 真是太好了！不过，要小心从 JSFiddle 复制粘贴，它会在我的 CSS 文件中添加两个看不见且无效的字符，导致该 CSS 文件验证/解析错误。一旦我删除了这些看不见的字符（这些字符是零宽度的，所以光标没有显示它们，但我能够使用退格键），它就工作得非常好。问题不在于你的代码，我认为 JS Fiddle 在显示的代码中引入了一些神秘的字符？不知道，但我只是想提一下，以备后人参考，万一有人遇到同样的问题。 - hypervisor666
95

我知道你接受了那个，但是也请用更少的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，我创建了这个，请检查http://jsfiddle.net/4ZeCz/97/。尝试使用我使用的属性进行操作，如果您有任何问题，可以问我:) - sandeep
3
这是一个解释：它创建了一个普通的正方形元素，两个相邻边有边框，从而形成一个倾斜的三角形。然后将正方形倾斜45度，这样三角形就朝上（或者你想要的任何方向）。顺便说一句，现在只需要使用-webkit-前缀（对于IE9，需要-ms-前缀），其他浏览器都支持无前缀。 - rvighne
4

我认为这是一个更简单的方法，使用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>

2
我正在尝试使三角形具有白色背景和1像素边框。但是您的示例中似乎没有看到边框。 - Jarad
当然不是因为clip-path本身的行为。然而，例如生成一个修改属性的JavaScript以便气球可以指向任何方向相对容易。此外，您也可以直接在CSS中定义一些变体。聪明的设计需要考虑到优缺点。这是您的选择，这是我的答案。 - lalengua
2
另一种实现这个目标的方法，尤其是对于像我一样需要使用等边或不等边三角形的人来说，是使用 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之间的区别）。
  • 边框大于1px（外观如此）似乎效果不佳。或者至少我还没有找到解决方案，但下面的方法可以让边框变得更大，尽管不是最佳选择。（我认为文档记录但不支持的drop-shadow()的第四个参数（<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()，最后一个（蓝色）被应用于以上所有内容。（也许这也与0.5像素外观有关）。
但是，如果您需要比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.5像素，尽管结果显得放大），而其余所有部分的模糊均为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;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接