如何制作倒圆角和“弯曲”内容以跟随弯曲的容器
旋转木马的底部设计为圆形,标题应遵循此规则......我不知道如何实现这一点。
弯曲的底部来自我的旋转木马上的这段代码:
.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>