• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Przyciemnienie połowy diva

Object Storage Arubacloud
0 głosów
107 wizyt
pytanie zadane 14 października 2020 w HTML i CSS przez Michał Samolewski Bywalec (2,240 p.)

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!

1 odpowiedź

+1 głos
odpowiedź 14 października 2020 przez ScriptyChris Mędrzec (190,190 p.)
wybrane 14 października 2020 przez Michał Samolewski
 
Najlepsza

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. 

2
komentarz 14 października 2020 przez Michał Samolewski Bywalec (2,240 p.)

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%);
}

Podobne pytania

0 głosów
1 odpowiedź 1,064 wizyt
pytanie zadane 30 października 2019 w HTML i CSS przez Mavimix Dyskutant (8,420 p.)
0 głosów
1 odpowiedź 627 wizyt
pytanie zadane 23 września 2020 w C i C++ przez Grzegorz Szyszka Nowicjusz (120 p.)
0 głosów
1 odpowiedź 5,450 wizyt
pytanie zadane 19 grudnia 2017 w C i C++ przez supergosc44 Początkujący (270 p.)

92,761 zapytań

141,684 odpowiedzi

320,478 komentarzy

62,105 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...