Przyciemnienie połowy diva

Question

Cześć wszystkim,
tworzę stronkę w bootstrapie i jestem aktualnie na etapie upiększania slidera.
Stworzyłem tło dla identyfikatorów slideów w postaci takiej jakby obustronnej strzałki.
Strzałka ta składa się z 3 divów; lewej strzałki, prostokąta na środku i prawej strzałki:

<div class="slider-indicators-background d-flex">

			<div class="triangle left"></div>
			<div class="rectangle">

				<ol class="carousel-indicators my-auto">
			    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
			  </ol>

			</div>
			<div class="triangle right"></div>
			
		</div>

.slider-indicators-background
{
	position: absolute;
	left: 50%;
	margin-left: -92px;
	bottom: -16px;
	z-index: 1;
}

.triangle {
	width: 0;
	height: 0;
}
.triangle.left {
	border-top: 16px solid transparent;
	border-right: 22px solid #edb879;
	border-bottom: 16px solid transparent;
}

.triangle.right {
	border-top: 16px solid transparent;
	border-left: 22px solid #edb879;
	border-bottom: 16px solid transparent;
}

.rectangle {
	width: 140px;
	height: 32px;
	background: #edb879;
}

.carousel-indicators li
{
	width: 10px;
	height: 10px;
	border-radius: 7px;
}

Chciałbym przyciemnić wertykalnie połowę tej figury. Będzie to wyglądało o niebo lepiej. Nie mam pojęcia jak się za to zabrać. Zna ktoś na to sposób? Chodzi o efekt jak na zdjęciu.

Z góry dziękuję za pomoc!

Answer 1

Można to zrobić pseudo elementem (np. ::after) z przyciętymi końcami przy pomocy clip-path, który będzie miał ciemniejsze tło. 

Comments

Dzięki wielkie, problem rozwiązany!

Dla tych którzy mają podobny problem. Skorzystałem z generatora różnych kształtów przez clip-path, dostępnego tutaj.

Wybieramy kształt, kopiujemy kod spod przykładu i to wszystko, ew. dostosowujemy kształt zmieniając delikatnie wartości procentowe w kodzie.

Uzyskany przeze mnie efekt:

<div class="testowy"></div>

.testowy
{
	width: 185px;
	height: 32px;
	display: block;
	clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0% 50%);
	background: linear-gradient(to bottom, #47bac1 50%, #36aac0 50%);
}