Question

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

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

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

Answer 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

更改CSS形状的边框颜色

1 个答案: