html - css3 渐变，顶部有线条

Question

<分区>

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">
	<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">
	<div class="side-panel"></div>
	<h1>This is text here..!</h1>
</div>