runsly CSS+DIV 2021-07-19

一道CSS题:不能改变html结构一个span做六个色块

html结构,只有一个span,不能增加html元素也不能增加id,class等任何属性。制作效果如下图每个块 100X100px 颜色分别为 red, orange, yellow, green, blue, indigo

<span></span>

第一种方法：span 加两个伪元素利用分别写左边框和右边框一共六个色块

      span {
        position: relative;
        display: block;
        height: 100px;
        width: 0;
        border-left: 100px solid red;
        border-right: 100px solid orange;
      }
      span::before {
        content: "";
        height: 100px;
        display: block;
        border-left: 100px solid yellow;
        border-right: 100px solid green;
        margin-left: 100px;
      }
      span::after {
        position: absolute;
        top: 0;
        content: "";
        height: 100px;
        display: block;
        border-left: 100px solid blue;
        border-right: 100px solid indigo;
        margin-left: 300px;
      }

第二种方法：渐变写出六个色块

    span{display: block; width: 600px; height: 100px; background: linear-gradient(to right,  red 0%,red 16%,orange 16%,orange 33%,yellow 33%,yellow 33%,yellow 49%,green 49%,green 66%,blue 66%,blue 83%,indigo 83%,indigo 100%);}

HTML/CSS