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>