是否可以使用變換或漸變背景創建多個 CSS3？

Question

我想使用 Css 變換或漸變背景來實現這種布局？（見下圖）。 現在我堅持使用圓錐漸變，我不知道如何在上面放置漸變背景。

見下面的片段。 將代碼片段作為整頁運行。

多謝你們。

 //gol-bg.my-bg-image { background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat; }.gol-bg { display: block; height: 200px; width: 700px; position: relative; background: conic-gradient( transparent 136deg, transparent 0 140deg, yellow 140deg); .my-content { position: relative; z-index: 1; } }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="bg-dark my-bg-image"> <div class="row no-gutters"> <div class="col-6"> <div class="gol-bg"> <div class="my-content">content</div> </div> </div> </div> </div>

Answer 1

我不確定我是否正確理解了您的問題，但是

是的，您可以使用多個轉換

（另外，看看這個： https://bennettfeely.com/clippy/ ）

這是一個例子：

 div { height: 100px; width: 100px; background: #000; color: #fff; margin: 5em auto; /* Just to center it a bit */ /* Transform part */ transform: scale(2) rotate(90deg); }

 <div>Hello World</div>

Answer 2

這可能不是您正在尋找的答案，但您也可以這樣做。 CSS 能夠制作各種形狀。

 .my-bg-image { background: url("https://via.placeholder.com/728x90.png?text=Background-image+Backgground-image+Background-image") 0 0 / cover no-repeat; }.gol-bg { display: block; position: relative; width: 250px; height: 0px; border-left: 50px solid red; border-right: 50px solid red; border-bottom: 100px solid red; border-top: 100px solid red; position: relative; }.gol-bg:after { content: ''; position: absolute; background: transparent linear-gradient(91deg, #02b3bc 0, #171c8f 100%) 0 0 no-repeat padding-box; width: 0; height: 0; border-left: 250px solid transparent; border-right: 100px solid transparent; border-bottom: 100px solid red; position: absolute; content: ""; top: 0px; left: -50px; }.gol-bg.my-content { position: relative; z-index: 1; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/> <div class="bg-dark my-bg-image"> <div class="row no-gutters"> <div class="col-6"> <div class="gol-bg"> <div class="my-content">content</div> </div> </div> </div> </div>