边框bootom渐变颜色

Question

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

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

helo ..我想在我的css中改变（.shadow）成为渐变色。我一直试图改变它，但它也改变了边框左右两种颜色。我只想改变边框底部的颜色..请帮帮我

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>