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%);}

總結

以上是生活随笔為你收集整理的在html创建色块,一道CSS题:不能改变html结构一个span做六个色块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。