边境bootom渐变色

Question

.screen{ 
 
\t position: absolute; 
 
\t float: left; 
 
\t width: 697px; 
 
\t height: 12px; 
 
\t top: 0px; 
 
\t left: 0px; 
 
\t right: 0px; 
 
\t margin: 90px auto; 
 
\t background-color: #737373; 
 
} 
 
\t .shadow{ 
 
\t \t border-bottom: 56px solid #2d2d2d; 
 
\t \t border-left: 50px solid transparent; 
 
\t \t border-right: 50px solid transparent; 
 
\t \t height: 12px; 
 
\t \t width: 591px; 
 
\t \t top: 0px; 
 
\t \t right: 0px; 
 
\t \t left: 0px; 
 
\t \t margin: 0px auto; 
 
\t }

<div class="screen"> 
 
\t \t \t <div class="shadow"></div> 
 
\t \t </div>

直升机..我想改变（.shadow）在我的CSS成为渐变色。我一直试图改变它，但它也改变了左边和右边的颜色。我只想改变边界底部颜色..请帮助我

Answer 1

您可以使用变换和线性渐变。

.screen { 
 
    position: relative; 
 
    max-width: 80%; 
 
    width: 697px; 
 
    height: 12px; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    margin: 90px auto; 
 
    background-color: #737373; 
 
    perspective: 500px; 
 
} 
 

 
.shadow { 
 
    position: absolute; 
 
    transform-origin: top center; 
 
    top: 100%; 
 
    /* next tune it to your needs */ 
 
    height: 50px; 
 
    left: 0px; 
 
    right: 0px; 
 
    background: linear-gradient(1deg, gray, lightgray, black); 
 
    transform: rotatex(45deg); 
 
}

<div class="screen"> 
 
    <div class="shadow"></div> 
 
</div>