三色线性渐变除法

Question

获得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种颜色均匀划分线条。

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

<div class="fancy-border">
    my content
</div>

＆＃13;

＆＃13;

＆＃13;