如何制作倒圆角和“弯曲”内容以跟随弯曲的容器

旋转木马的底部设计为圆形,标题应遵循此规则......我不知道如何实现这一点。

弯曲的底部来自我的旋转木马上的这段代码:

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

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

.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);
}

编辑:在 wordpress 上使用 bootstrap 添加 HTML,因此这在 php 上也有一些变量:

<section>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <ol>
                            <?php  $number = 0;
        foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =>
                            $value): ?>
                            <li><?php echo $value['ss_slide_title'];?></li>
                            <?php endforeach; ?>
                        </ol>
                        <div></div>
                        <?php foreach(Home::getRepeatable(get_the_ID(),'carrousel_slide') ?? [] as $key =>
                        $value):?>
                        <div>
                            <div>
                                <p><?php echo $value['ss_slide_desc']; ?></p>
                                <a href="<?=  $value['ss_slide_link']; ?>"><?php echo $value['ss_slide_button_text']; ?> </a>
                            </div>
                            <img src="<?= wp_get_attachment_url($value['ss_slide_image']); ?>" alt="First slide" />
                        </div>
                        <?php endforeach ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

以上是如何制作倒圆角和“弯曲”内容以跟随弯曲的容器的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>