如何用两种颜色制作一个背景？

Question

如何编写一个CSS类使背景几乎全白？我想做到底部是黑色的箭头图标。

.search-rect {
        width: 160px;                   
        height: 200px;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 3px;
        padding-right: 3px;
        background-color: #fafafa;
        border: 1px solid #424242;
        border-radius: 10px;        
        text-align: center;
        font-size: 10px;

        p {
            line-height: 150%;
        }
}

Answer 1

您可以使用::before和::after伪元素 像这样：https://codepen.io/bsalex/pen/WXLpPY

Answer 2

尝试css渐变。 语法是：

background: linear-gradient(direction, color-stop1, color-stop2, ...);

例如，

#grad {
background: blue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard syntax */}