Billy Logan Billy Logan - 7 months ago 6
HTML Question

How to make circle thing in CSS?

I need to make that white thing over grey stripe. I got confused as I haven't made anything like that before. Which approach would you apply for creation of such thing?

enter image description here

JSFiddle

<div class="stripe"></div>

.stripe {
background-color: #B7B7B7;
height: 13vh;
}


Thank you in advance!

Answer

W3Schools on border-radius property

.stripe {
    background-color: #B7B7B7;
    height: 13vh;
}
.thatwhitethingovergreystripe {
    background-color: white;
    height: 13vh; /* or 100% */
    width: 80px;
    border-top-right-radius: 7vh; /* this does the trick; make it any number you like or just make it full height of your div */
    border-bottom-right-radius: 7vh; /* and this */
}
<div class="stripe">
    <div class="thatwhitethingovergreystripe"></div>
</div>