Border bootom Farbverlauf

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>

helo .. Ich möchte in meinem CSS werden Farbverlauf (.shadow) ändern. Ich habe versucht, es zu ändern, aber es ändert auch die Grenze links und rechts Farbe. Ich möchte nur die Grenze-unten Farbe ändern .. bitte helfen Sie mir

Answer 1

können Sie Transform und einen linearen Gradienten verwenden.

.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>