I have to build for my website hexagon carousel indicators. I’ll need like this image.
So with this code when the carousel is active it s work find. It s full red background.
But when it s inactive i have a square inside the hexagon.
Can you help me and make that inside the hexagon inactive i can see the hexagon shape?
Thank you in advance cheers!
#section-testimonials .carousel-indicators {
bottom: 15px !important;
margin-bottom: unset !important;
}
#section-testimonials .carousel .carousel-indicators button {
display: inline-block;
background-color: transparent;
/* set background color to transparent */
background-clip: unset;
border: 4px solid red;
width: 10px;
height: 10px;
opacity: 1;
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#section-testimonials .carousel .carousel-indicators button.active {
background-color: red;
border-color: red;
}<body>
<section id="section-testimonials">
<div id="carouselTestimonialsIndicators" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="1" aria-label="Slide 2">
</button>
<button type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<div class="carousel-item px-md-3">
<div class="comment-slider">
<p class="fs-6-mobile">“Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. ”
</p>
</div>
</div>
<!-- <div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div> -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselTestimonialsIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon d-none" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
2
Answers
I did hexagonal indicators in photoshop and exported svg. I used for
ol.carousel-indicators liandol.carousel-indicators li.activeclassesbackgroundattribute and some css.let me try to answer this by guessing as i am not entirely sure what you mean.
You use the css clip-path, this works by clipping something from the element it’s applied to, in this case a hexagon shape. your actual object does not change form.
your actual object still is a box with a solid 4px border.
you color this shape by using border and background color while it has the .active class.
while it has the class inactive the background has no background color specified in the css, that’s why it shows a white square.
if you want a white hexagon with a red border you could try using pseudo elements, something like this might do the trick: