获得borderImage top 4色分区的答案非常有效:https://stackoverflow.com/a/38850860/1971598,
但我想要一个3色分区。
所以这适用于4色分割
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%,red 50%, red 75%, teal 75%) 5;
但我希望3种颜色均匀划分线条。
答案 0 :(得分:1)
.fancy-border {
width: 150px;
height: 150px;
text-align:center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 33%, yellow 33%, yellow 66%, red 66%) 5;
}

<div class="fancy-border">
my content
</div>
&#13;