我想做类似三角形的旋转木马，但是怎么做？ [复制]答案

【问题标题】：I want to do Triangle-like Carousel but How? [duplicate]我想做类似三角形的旋转木马，但是怎么做？ [复制]
【发布时间】：2023-04-01 10:19:02
【问题描述】：

如何获取此形状轮播的信息

我搜索了“三角形旋转木马”、“尖头旋转木马”、“尖锐旋转木马”，但一无所获

【问题讨论】：

这是一个带尾巴的正常旋转。这个尾巴可以使用一些伪类来完成。
您可以使用引导轮播：getbootstrap.com/docs/5.0/components/carousel 或 w3Schools 中的示例：w3schools.com/bootstrap/bootstrap_carousel.asp 并使用 bennettfeely.com/clippy 制作像 clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%); 这样的尾部形状

标签： html css bootstrap-4 frontend carousel

【解决方案1】：

您可以使用clip-path 属性来这样做

.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>

【讨论】：