三色线性渐变除法

时间:2018-03-11 03:03:31

标签: css linear-gradients

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

1 个答案:

答案 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;
&#13;
&#13;