更改 CSS 形状的边框颜色

【问题标题】：Changing border color of a CSS shape更改 CSS 形状的边框颜色
【发布时间】：2014-06-01 00:18:04
【问题描述】：

我正在尝试更改 CSS 形状的边框颜色但不成功。每次我玩弄下面的元素时，它都会改变形状的整个颜色。

.pointer {
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-left: 10px solid red;
    border-bottom: 5px solid transparent;
    position:relative;
}

我希望能够更改左、右、上、下边框颜色。有人可以帮忙吗？

【问题讨论】：

http://www.w3schools.com/cssref/pr_border-color.asp

标签： css border css-shapes border-color

【解决方案1】：

这是因为整个形状是边框。

在使用边框的不规则形状周围创建边框的唯一方法是，将它们中的两个分层或以不使用边框的方式创建它

这是一种通过分层另一个三角形来添加边框的方法

.pointer:before {
    content:'';
    position:absolute;
    left:-15px; /* position it to the left and top of the parent element */
    top:-10px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent; /* Increase the size of it */
    border-left: 20px solid black;
    border-bottom: 10px solid transparent;
    z-index:-1; /* Put it behind the parent element */
}

Demo

【讨论】：

非常感谢。问题解决了。现在我对 :before in css 有了更多的了解