Pracoval som na webovej stránke, ktorá bola zameraná na vodu – bazény, wellness a tak podobne. Ako super nápad mi prišlo namiesto klasických bodiek v slideri, umiestniť kvapky. Skúšal som vygoogliť nejaký clip-path pre kvapku, ale nebol som úspešný. A vtedy mi to došlo. Kvapka predsa nie je nič iné ako kruh, s jedným rohom štvorcovým a celé je to otočené o 45°.
<div class="kvapka"></div>
Jednoducho div, alebo iný element, ktorý ideme spraviť do tvaru kvapky. Musíme nastaviť rovnakú width aj height, inač bude kvapka rozťahaná, resp. nepravidelná. Vlastnosťou transform: rotate(45deg); nastavíme otočenie:
.kvapka {
border-radius: 0 50% 50% 50%;
background: #f00;
width: 100px;
height: 100px;
transform: rotate(45deg);
}
Elementor slider
V Elementore sa táto vec dá jednoducho využiť, a to nie len priamo na Slideri, ale pri všetkých elementoch, ktoré využívajú Swiper slider. Čiže napríklad image carousel, testimonials carousel, media carousel a pod. Kód je jednoduchý, stačí na daný element do Custom CSS vpísať tento kód:
selector .swiper-pagination-bullet {
border-radius: 0 50% 50% 50%;
transform: rotate(45deg);
}
.swiper-pagination-bullet je trieda pre bodku. Takže tým označíme všetky bodky, aktívne aj neaktívne a nastavíme im tvar. Samotnú veľkosť bodiek si potom nastavíme klasicky v Štýl -> Navigácia.
PS: Tiež je možné pridávať aj clip-path a tým nastaviť akýkoľvek tvar
