I want to do Triangle-like Carousel but How?

Question

How can reach info for this shaped carousel

I searched "triangle carousel", "pointy carousel", "sharp carousel" and found nothing

It's a normal carousal with a tail.. That tail can be done using some pseudo classes. — Abin Thaha, Jul 28 '21 at 12:02
You can use the bootstrap carousel: https://getbootstrap.com/docs/5.0/components/carousel/ or that example from w3Schools: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp and use https://bennettfeely.com/clippy/ to make a tail shape like `clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);` — GucciBananaKing99, Jul 28 '21 at 12:47

score 0 · Answer 1 · answered Jul 28 '21 at 12:59

You could use clip-path property to do so

.caroussel {
  background-color: teal;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

h1 {
  font-size: 4rem;
  color: white;
}

<div class="caroussel">
  <h1>Hello</h1>
</div>

I want to do Triangle-like Carousel but How?

1 Answers1