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

Posted 2023-03-05

【中文标题】我想做类似三角形的旋转木马，但是怎么做？ [复制]

【英文标题】：I want to do Triangle-like Carousel but How? [duplicate]

【发布时间】：2021-10-04 04:09:00

【问题描述】：

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

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

【问题讨论】：

这是一个带尾巴的正常旋转。这个尾巴可以使用一些伪类来完成。

您可以使用引导轮播：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%); 这样的尾部形状

【参考方案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>