Hey everyone i'm working on a Bootstrap 4 Carousel with my controls replaced by arrow images. I'm trying to make the background of the arrows a sideways oval like this picture. For some reason, the border is not becoming small enough to mimic the picture. I've tried using radius, border radius, width, and nothing has worked. Any help would be appreciated. Here's the pic https://i.sstatic.net/7I6TX.jpg
width:1440px;
background:url(images/pattern-quotes.svg),url(images/pattern-bg.svg);
background-repeat: no-repeat, no-repeat;
background-size: 10%, 50%;
background-position:top 213px left 250px,top 70px right 70px;
}
.container{
font-size: 32px;
font-family: 'Inter', sans-serif;
position:relative;
top: 150px;
font-weight: 300;
}
.item{
width:540px;
height:540px;
float:right;
}
.controls{
position:relative;
padding-left: 700px;
background: yellow;
border-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
.controls img {
}
.carousel-caption {
width:650px;
text-align: left;
top:30%;
left:-105%;
bottom:auto;
color:hsl(240, 38%, 20%)
}
strong{
font-weight: 700;
font-size: 20px;
}
span{
font-weight: 300;
color: hsl(240, 18%, 77%);
}```
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="image" src="images/image-tanya.jpg" alt="Tanya" ><div class="carousel-caption"> <p>“ I’ve been interested in coding for a while but never taken the jump, until now.
I couldn’t recommend this course enough. I’m now in the job of my dreams and so
excited about the future. ”</p> <strong>Tanya Sinclair<span > UX Designer </span></strong>
</div>
</div>
<div class="item ">
<img class="image" src="images/image-john.jpg" alt="John"><div class="carousel-caption"> <p>“ If you want to lay the best foundation possible I’d recommend taking this course. The depth the instructors go into is incredible. I now feel so confident about
starting up as a professional developer. ”</p><strong>John Tarkpor<span > Junior Front-end Developer </span></strong></div>
</div>
</div>
<!-- Left and right controls -->
<div class="controls">
<a id="prev" class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span><img src="images/icon-prev.svg"></span>
<span class="sr-only">Previous</span>
</a>
<a id="next" class="carousel-control-next" href="#myCarousel" data-slide="next">
<span><img src="images/icon-next.svg"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
[1]: https://i.sstatic.net/CReKC.jpg
The controls can be positioned absolute. As it then collapses it requires a new dimension (width/height). Also the z-index is important to make sure both arrows are accessible.
.controls {
background-color: rgba(255, 255, 255, 0.3);
border-radius: 25px;
bottom: 20px;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3);
height: 40px;
position: absolute;
right: 20px;
width: 100px;
z-index: 999;
}
.carousel-control-prev,
.carousel-control-next {
width: 50%;
}
Please note I've only worked out the functionality. I'll leave the design to you.