我正在嘗試使用 CSS（只是白色三角形水平線，而不是灰色背景）實作以下目標。
我試圖將它應用到像這樣的偽元素，但我知道我遺漏了一些東西，或者沒有正確地做。
&:after {
content: '';
width: 200px;
height: 50px;
position: absolute;
background-repeat: repeat-x;
background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}
uj5u.com熱心網友回復：
.gradient-bg{
height: 50px;
width: 100%;
background: linear-gradient(45deg, transparent 50px, transparent 0px, #a48d01 50px, #a48d01 100px), linear-gradient(135deg, transparent 0px, transparent 50px, red 50px, red 100px);
background-size: 40px;
background-position: 0 30px;
}<p class="gradient-bg"></p>也許這可以給你一些想法。你需要使用兩個漸變。
uj5u.com熱心網友回復：
使用一個conic-gradient(). 調整變數s來控制大小和80px控制三角形之間的距離
.box {
--s: 25px;
height:200px;
background:
conic-gradient(from -135deg at var(--s) 50%,red 90deg,#0000 0) center/80px calc(2*var(--s)) repeat-x
}<div class="box"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/403291.html
標籤：