CSS漸變邊框：

Question

css問題。

是否可以添加一個漸變到邊界反映到上面的div？

我可以添加一個純色，似乎無法找到一個漸變的東西。

current status

\t .offerBox { 
 
\t \t width: 360px; 
 
\t \t height: 170px; 
 
\t \t position: relative; 
 
\t \t border-radius: 5px; 
 
\t \t background: linear-gradient(to right, #fcd651 0%,#f9c100 100%); 
 

 
\t } 
 
\t 
 
\t .offerBox:after { 
 
\t \t top: 100%; 
 
\t \t left: 50%; 
 
\t \t border: solid transparent; 
 
\t \t content: " "; 
 
\t \t height: 0; 
 
\t \t width: 0; 
 
\t \t position: absolute; 
 
\t \t pointer-events: none; 
 
\t \t border-color: rgba(136, 183, 213, 0); 
 
\t \t border-top-color: #f9c100; 
 
\t \t border-width: 30px; 
 
\t \t margin-left: -30px; 
 
}

<div class="offerBox"></div>

謝謝！

Answer 1

您可以刪除邊框和應用漸變:after背景

使用transform: rotate(45deg);給它三角形的樣子。 和z-index: -1;將把它推到offer div下面。

.offerBox:after { 
     top: calc(100% - 15px); 
     left: 50%; 
     content: " "; 
     height: 30px; 
     width: 30px; 
     position: absolute; 
     pointer-events: none; 
     background: linear-gradient(to right, #fcd651 0%, #f9c100 100%); 
     margin-left: -30px; 
     transform: rotate(45deg); 
     z-index: -1; 
    } 

代碼片段

.offerBox { 
 
    width: 360px; 
 
    height: 170px; 
 
    position: relative; 
 
    border-radius: 5px; 
 
    background: linear-gradient(to right, #fcd651 0%, #f9c100 100%); 
 
} 
 

 
.offerBox:after { 
 
    top: calc(100% - 15px); 
 
    left: 50%; 
 
    content: " "; 
 
    height: 30px; 
 
    width: 30px; 
 
    position: absolute; 
 
    pointer-events: none; 
 
    background: linear-gradient(to right, #fcd651 0%, #f9c100 100%); 
 
    margin-left: -30px; 
 
    transform: rotate(45deg); 
 
    z-index: -1; 
 
}

<div class="offerBox"></div>

Answer 2

可以作爲背景使用，您可以根據需要改變漸變的顏色。如果你需要居中對齊底部，你可以在.offerBox:after使用transform:rotate(45deg) translate(-50%, 0);和更新頂部，你需要

.offerBox { 
 
    width: 360px; 
 
    height: 170px; 
 
    position: relative; 
 
    border-radius: 5px; 
 
    background: linear-gradient(to right, #fcd651 0%, #f9c100 100%); 
 
} 
 
.offerBox:after { 
 
    top: 95%; 
 
    left: 50%; 
 
    content: " "; 
 
    display: block; 
 
    height: 30px; 
 
    width: 30px; 
 
    background: linear-gradient(to right, tomato 50%, green 100%); 
 
    position: absolute; 
 
    pointer-events: none; 
 
    z-index: -1; 
 
    transform: rotate(45deg) translate(-50%, 0); 
 
}

<div class="offerBox"></div>

Answer 3

一種可能的方法來解決問題：使用:before和:after畫一個「框頁腳」使用skew製作一個三角形，以便您有一個響應和準確的背景漸變。

.offerBox { 
 
    position relative; 
 
    width: 360px; 
 
    height: 170px; 
 
    position: relative; 
 
    border-radius: 5px; 
 
    background: linear-gradient(to right, #fcd651 0%, #f9c100 100%); 
 
} 
 

 
.offerBox:before { 
 
    position: absolute; 
 
    bottom: -5px; 
 
    left: -10px; 
 
    content: " "; 
 
    height: 30px; 
 
    width: 50%; 
 
    pointer-events: none; 
 
    background: white; 
 
    transform: skew(45deg); 
 
} 
 

 
.offerBox:after { 
 
    position: absolute; 
 
    bottom: -5px; 
 
    right: -10px; 
 
    content: " "; 
 
    height: 30px; 
 
    width: 50%; 
 
    pointer-events: none; 
 
    background: white; 
 
    transform: skew(-45deg); 
 
}

<div class="offerBox"></div>