CSS三角形自定义边框颜色

Posted 2023-03-06

【中文标题】CSS三角形自定义边框颜色

【英文标题】：CSS triangle custom border color

【发布时间】：2012-03-16 01:59:06

【问题描述】：

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

【参考方案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

【讨论】：

嘿，我不明白如何修改三角形以显示在框的另一侧（我不明白三角形 css 是如何工作的）

请注意，对于与@Kevin 有相同问题的人。查看border-color 属性，根据彩色边框，三角形将指向不同的方向。要将箭头指向左侧，请将 .container:after 和 .container:before 中的 border-color 更改为 transparent #e3f5ff transparent transparent;

@Scott 谢谢！你的 JS Fiddle 是正确的！但是，请注意 JSFiddle 中的 copypasta，它在我的 CSS 文件中添加了两个不可见且无效的字符，导致该 css 文件中的验证/解析错误。一旦我删除了不可见的字符（字符宽度为零，因此光标没有显示它们，但我能够退格），它的效果非常好。问题不是你的代码，我认为 JS Fiddle 在显示的代码中引入了一些神秘的字符？不知道，但我只是想提一下，以防万一有人遇到同样的问题。

【参考方案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/

【讨论】：

嘿，我不明白如何修改三角形以显示在框的另一侧（我不明白三角形 css 是如何工作的）

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

解释：这将创建一个正常的正方形元素，在两个相邻边上都有边框，形成一个倾斜的三角形。然后正方形倾斜 45 度，因此三角形指向上方（或您想要的任何位置）。顺便说一句，您现在只需要 -webkit- 前缀（对于 IE9 和 -ms-）。所有其他浏览器都支持无前缀。

【参考方案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>

【讨论】：

我试图让三角形有一个带有 1px 边框的白色背景。我在您的示例中看不到边框。

@Jarad 当然不是因为剪辑路径本身的行为。但是，相对容易（例如）生成一个修改属性的 JavaScript，以便气球可以指向任何方向。您也可以直接在 CSS 中定义一些品种。的优点和缺点。智能设计将这两件事都考虑在内。这是你的选择，这是我的答案。

【参考方案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;

【参考方案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> 值的 0.5px 看起来更像 1px 而不是 1px，尽管我认为它与三角函数有关（尽管至少在我的显示器上我认为实际的基于 trig 的值或 0.5px 甚至 0.1px 之间没有区别。 大于 1 像素的边框（嗯，它们的外观就是这样）似乎效果不佳。或者至少我还没有找到解决方案，尽管请参阅下面的不太理想的方法来扩大一点。 （我认为 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() 和最后一个的有趣之处（蓝色）适用于上述所有内容。 （也许这也与 .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.5 像素，尽管结果看起来是相乘的），其余所有的模糊都为 0。但这仅适用于所有侧面的相同颜色，它会导致一些看起来圆润的角落以及你走的越大的非常粗糙的边缘。