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

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

第一种方法：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%);}