css3 gradient on line on

Question

私はインフォメーションをウェブサイト作成にしようとしています。この画像のような上に線があるグラデーションを作成したいとします：https://ibb.co/e8xmCkグラデーションと上に線がありますそれは異なる色とそれを特定の場所の背景にすることです。どうもありがとう！

Answer 1

...

.container {width: 100%; height: 200px; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); position: relative; box-sizing: border-box; z-index: 1;} 
 
.container:before {display: block; content: ""; height: 10%; width: 100%; background: red; position: absolute; top: 0px; left: 0px; z-index: -1;} 
 
h1 {font-family: Arial; font-size: 49px; font-weight: bold; color: #fff; text-align: center; margin: 0px;}

<div class="container"> 
 
\t <h1>This is text here..!</h1> 
 
</div>

、別のはここにある。私は実際にあなたの質問を理解することが本当にできませんでしたが、 にもかかわらず、私はあなたのような希望のソリューションを作りました

.container {width: 100%; height: 200px; background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0)); position: relative; box-sizing: border-box; z-index: 1; overflow-y: hidden;} 
 
.container:before {display: block; content: ""; height: 10%; width: 100%; background: red; position: absolute; top: 0px; left: 0px; z-index: -1;} 
 
.side-panel {height: 100%; width: 30%; position: absolute; top: 0px; left: -10%; background: #2493a4; z-index: -2; transform: skew(20deg);} 
 
h1 {font-family: Arial; font-size: 49px; font-weight: bold; color: #fff; text-align: center; margin: 0px;}

<div class="container"> 
 
\t <div class="side-panel"></div> 
 
\t <h1>This is text here..!</h1> 
 
</div>