Skocz do zawartości

Strzałki w background - CSS zamiast IMG


Blaku
 Udostępnij

Rekomendowane odpowiedzi

Cześć

Dziś kolejny problem.

Da radę uzyskać w CSS efekt jak na zdjęciu?

3 DIV'y na szerokość, pod każdym jedno z nich, czyli pod pierwszym białe, pod kolejnym następne i tak dalej.

Zdjęcie:

Spoiler

v5RdVGN.png

Da radę osiągnąć to w CSS, czy jednak wstawić to zdjęcie?

Odnośnik do komentarza
Udostępnij na innych stronach

Spoiler

rzQg3Yv.png

Temat prawie ogarnięty.

Strzałki podkłada pod tło następnego diva.

Stosuję element before

CSS:

.et_pb_row_5 .kol1::before{
	content: "";
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid #fff;	
	position: absolute;
	left: 310px;
	top: 40%;
}
.et_pb_row_5 .kol2::before{
	content: "";
	width: 0; 
	height: 0; 
	border-top: 60px solid transparent;
	border-bottom: 60px solid transparent;
	border-left: 60px solid #93dff9;	
	position: absolute;
	left: 310px;
	top: 40%;
}

HTML:

<div class=" et_pb_row et_pb_row_5 et_pb_equal_columns et_pb_section_parallax">
				
				<div class="et_pb_column et_pb_column_1_3 kol1 et_pb_column_5">
				
				<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_fade_in et_pb_image_0 et_always_center_on_mobile et_pb_image_sticky et-animated">
				<img src="http://www.betterit.vipserv.org/betterit_new/wp-content/uploads/2016/07/pomysl.png" alt="">
			
			</div><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_4">
				
<p><strong></strong></p><strong>
<h2 style="text-align: center;font-size: 18px;">Analiza</h2>
</strong><p><strong>&nbsp;</strong></p>

			</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_5">
				
<p><strong>Cel:</strong> Zgromadzenie wszystkich koniecznych materiałów oraz przeprowadzenie prac wstępnych związanych z rozpoczęciem projektowania strony internetowej.</p>
<p><strong>Przebieg:</strong> Polega na zebraniu wszelkich sugestii i wytycznych potrzebnych do realizacji projektu, na określeniu wyglądu i funkcjonalności tworzonej strony, a także na zapoznaniu się z obecną w danej branży konkurencją i z potencjalnym odbiorcą.</p>
<p><strong>Efekt:</strong> Dokument, w którym zawarte zostaną ustalone kwestie i wyniki analizy do akceptacji przez klienta.</p>
<p><strong>Korzyść:</strong> Dzięki takiemu usystematyzowaniu prac jesteśmy w stanie tworzyć strony internetowe najwyższej jakości, dostosowane do wymagań klienta, wyróżniające się na tle konkurencji i atrakcyjne dla użytkowników.</p>

			</div> <!-- .et_pb_text -->
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 kol2 et_pb_column_6">
				
				<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_fade_in et_pb_image_1 et_always_center_on_mobile et_pb_image_sticky et-animated">
				<img src="http://www.betterit.vipserv.org/betterit_new/wp-content/uploads/2016/07/grafika.png" alt="">
			
			</div><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_6">
				
<p><strong></strong></p><strong>
<h2 style="text-align: center;font-size:18px;">Projekt graficzny</h2>
</strong><p><strong>&nbsp;</strong></p>

			</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_7">
				
<p><strong>Cel:</strong> Stworzenie graficznego prototypu strony internetowej.</p>
<p><strong>Przebieg:</strong> W tej fazie przygotowujemy prototyp graficzny strony internetowej. Klient przez cały czas ma możliwość wprowadzenia modyfikacji w grafice. Na koniec otrzymuje ostateczną wersję prototypu do akceptacji.</p>
<p><strong>Efekt:</strong> W wersji finalnej prototypu graficznego strony internetowej dysponujemy widocznym efektem końcowym całego serwisu wraz ze wszystkimi elementami graficznymi i podstronami.</p>
<p><strong>Korzyść:</strong> Dzięki takiemu systemowi, nasz Klient dokładnie wie, jak będzie wyglądać strona po zakończeniu całości prac.</p>

			</div> <!-- .et_pb_text -->
			</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_1_3 kol3 et_pb_column_7">
				
				<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_fade_in et_pb_image_2 et_always_center_on_mobile et_pb_image_sticky et-animated">
				<img src="http://www.betterit.vipserv.org/betterit_new/wp-content/uploads/2016/07/proces.png" alt="">
			
			</div><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_8">
				
<p><strong></strong></p><strong>
<h2 style="text-align: center;font-size: 18px;">Wykonanie, testowanie i wdrożenie</h2>
</strong><p><strong>&nbsp;</strong></p>

			</div> <!-- .et_pb_text --><div class="et_pb_text et_pb_module et_pb_bg_layout_dark et_pb_text_align_justified  et_pb_text_9">
				
<p><strong>Cel:</strong> Wykonanie, przetestowanie i wdrożenie strony internetowej.</p>
<p><strong>Przebieg:</strong> W oparciu o wcześniej stworzony prototyp graficzny i dzięki dostarczeniu odpowiednio dostosowanych grafik, specjalista może rozpocząć programowanie i optymalizowanie serwisu. Następnie przeprowadzamy prace związane z testowaniem strony, by na końcu wdrożyć jej ostateczną wersję.</p>
<p><strong>Efekt:</strong> Gotowa strona internetowa, spełniająca wszelkie wymogi potrzebne do jej prawidłowego funkcjonowania.</p>
<p><strong>Korzyść:</strong> W pełni funkcjonalna strona internetowa, pozbawiona błędów.</p>

			</div> <!-- .et_pb_text -->
			</div> <!-- .et_pb_column -->
					
			</div>
Odnośnik do komentarza
Udostępnij na innych stronach

3 minuty temu, dsun napisał:

z-index  użyj

Gdybym mógł to użył bym i nie pytał bym, znam podstaw trochę  

Nakłada strzałkę na następny div. Chociaż wtedy nadam DIVowi z tekstem wyższy index to i tak nie reaguje.

Czyli:

kol1 nadaje z-index: 1;

kol2 z-index: 0;

et_pb_text_7 z-index: 11111111111;

Nie działa prawilnie.

DIV pod całą zawartość tego diva? position absolute, niższy index i powinno załatwić sprawę?

Odnośnik do komentarza
Udostępnij na innych stronach

Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij

×