css - 如何使倒圆 Angular 和 "bend"内容跟随 flex 的容器

Question

旋转木马的底部设计为圆形，标题应遵循此规则......我不知道如何实现这一点。
flex 的底部来自我的旋转木马上的这段代码:

.round-carousel {
    height: 600px;
    border-bottom-left-radius: 80% 20%;
    border-bottom-right-radius: 80% 20%;
    overflow-y: hidden;
    width: 105%;
    left: -3%;
}

到目前为止我所拥有的东西......我迷失了如何使 div flex 。也许是深夜了，我的大脑不工作了..

.carousel-indicators {
    height: 80px;
    background: rgba(0,0,0,0.5);
    width: 100%;
    margin: auto;
}

.carousel-indicators li {
    font-size: 0.9rem;
    height: 40px;
    text-indent: inherit;
    background: none;
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    -ms-flex-pack: end;
    width: 12%;
    line-height: 1.3rem;
    position: relative;
    margin: 0 15px;
    flex-direction: column;
    -webkit-flex-direction: column;
-ms-flex-direction: column;
-moz-flex-direction: column;
    text-align: center;
}

.carousel-indicators li:after{
    height: 8px;
    width: 8px;
    border-radius: 100%;
    content: " ";
    background: #fff;
    position: absolute;
    left: 50%;
    bottom: -20px;
}

.carousel-indicators li.active{
color: #72c267;
}

.carousel-indicators li.active:after{
height: 10px;
width: 10px;
background: #72c267;
box-shadow: 0 0 0 2px #72c267;
border: 2px solid rgba(0, 0, 0, 0.6);
}

编辑:添加 HTML
在 wordpress 上使用 bootstrap，所以这在 php 上也有一些变量:

<section id="slider">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 px-0">
                <div id="carouselExampleSlidesOnly" class="carousel slide main-image-slider" data-ride="carousel" data-interval="5000">
                    <div class="carousel-inner round-carousel">
                        <ol class="carousel-indicators align-items-center">
                            <?php  $number = 0;
        foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =>
                            $value): ?>
                            <li class="<?= $key === 0 ? 'active' : '' ?>" data-target="#carouselExampleSlidesOnly" data-slide-to="<?php echo $number++; ?>"><?php echo $value['ss_slide_title'];?></li>
                            <?php endforeach; ?>
                        </ol>
                        <div class="carousel-overlay h-100 w-100"></div>
                        <?php foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =>
                        $value):?>
                        <div class="carousel-item <?= $key === 0 ? 'active' : '' ?>">
                            <div class="carousel-caption">
                                <p><?php echo $value['ss_slide_desc']; ?></p>
                                <a class="btn btn-primary btn-md" href="<?=  $value['ss_slide_link']; ?>"><?php echo $value['ss_slide_button_text']; ?> </a>
                            </div>
                            <img class="img-fluid d-block w-100" src="<?= wp_get_attachment_url($value['ss_slide_image']); ?>" alt="First slide" />
                        </div>
                        <?php endforeach ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

这可能会让你朝着正确的方向前进。我是用 CSS 制作的，但如果您希望输出与您在问题中提到的图像相同，我建议您使用 svg。

var slide_btn = document.getElementsByClassName('slide_btn');
var carousel = document.getElementsByClassName('carousel')[0];
var carousel_after = document.getElementsByClassName('carousel_after')[0];
slide_btn[0].onclick = function() {
  carousel.style.backgroundImage = "url('https://media.architecturaldigest.com/photos/5d49d4d911d3930008a81c6c/master/pass/GettyImages-872448084.jpg')";
  carousel_after.style.backgroundImage = "url('https://media.architecturaldigest.com/photos/5d49d4d911d3930008a81c6c/master/pass/GettyImages-872448084.jpg')";
}

* {
  margin: 0px;
  padding: 0px;
  font-family: 'arial';
}

body {
  background: #161616;
}

.container {
  position: relative;
  height: 80vh;
  width: 100%;
  display: flex;
  background: #161616;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.carousel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 80vh;
  width: 130%;
  background-image: url("https://www.build-review.com/wp-content/uploads/2020/01/model-architecture.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transition: 0.4s;
}

.carousel_after {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 60vh;
  width: 130%;
  background-image: url("https://www.build-review.com/wp-content/uploads/2020/01/model-architecture.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 5;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  transition: 0.4s;
}

.slider_pane {
  position: absolute;
  bottom: 0;
  padding-top: 50vh;
  background: rgba(0, 0, 0, 0.6);
  height: 30vh;
  display: flex;
  width: 130%;
  align-items: center;
  justify-content: center;
  z-index: 4;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}

.slider_pane p {
  display: flex;
  padding: 30px;
  margin-top: 50px;
}

.slider_pane a {
  display: inline-block;
  text-decoration: none;
  color: white;
  width: 160px;
  transition: 0.2s;
  font-size: 1.5rem;
  margin: 0px 2rem;
  text-align: center;
  transform-origin: 50% 50%;
}

.slider_pane a:hover {
  color: #00FF7F;
}

.slider_pane a:nth-child(1) {
  transform-origin: 100% 0%;
  transform: rotateZ(10deg);
}

.slider_pane a:nth-child(2) {
  transform-origin: 0% 0%;
  transform: rotateZ(5deg)translateY(5px);
}

.slider_pane a:nth-child(3) {
  transform-origin: 0% 0%;
  transform: rotateZ(0deg)translateY(25px);
}

.slider_pane a:nth-child(4) {
  transform-origin: 100% 0%;
  transform: rotateZ(-4deg)translateY(15px);
}

.slider_pane a:nth-child(5) {
  transform-origin: 0% 0%;
  transform: rotateZ(-6deg)translateY(10px);
}

.slider_pane a:nth-child(6) {
  transform-origin: 0% 0%;
  transform: rotateZ(-10deg)translateY(-15px);
}

@media only screen and (max-width: 1121px) {
  .carousel,
  .carousel_after {
    background-size: 1457.3px auto;
  }
}

<div class="container">
  <div class="carousel">
  </div>
  <div class="carousel_after">
  </div>
  <div class="slider_pane">
    <p>
      <a class="slide_btn" href="#/" style="--i:3">Collaborative Science</a>
      <a class="slide_btn" href="#/" style="--i:3">Traditional Research</a>
      <a class="slide_btn" href="#/" style="--i:3">Pandemic Preparedness</a>
      <a class="slide_btn" href="#/" style="--i:-3">Global Reach</a>
      <a class="slide_btn" href="#/" style="--i:-3">Educational Mission</a>
      <a class="slide_btn" href="#/" style="--i:-3">Physician Scientists</a>
    </p>
  </div>

</div>
</div>