• 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
100 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,024 wizyt
pytanie zadane 30 października 2019 w HTML i CSS przez Mavimix Dyskutant (8,390 p.)
0 głosów
1 odpowiedź 614 wizyt
pytanie zadane 23 września 2020 w C i C++ przez Grzegorz Szyszka Nowicjusz (120 p.)
0 głosów
1 odpowiedź 5,402 wizyt
pytanie zadane 19 grudnia 2017 w C i C++ przez supergosc44 Początkujący (270 p.)

92,656 zapytań

141,546 odpowiedzi

319,987 komentarzy

62,026 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...