JSFiddle - React, Tailwind, and code Playground

by Aleksandr Zidyganov

HTML

<div class="crop">
    <div class="crop-h">
        <div class="num">5</div>
    </div>
</div>

CSS

body {
    background-color: #ccc;
}
.crop {
    width: 300px;
    height: 300px;
    border: 1px solid #fff;
    position: relative;
    overflow: hidden;
}
.crop-h {
    background-color: #f2f2f2;
    position: absolute;
    right: -500px;
    bottom: -600px;
    border-radius: 100%/38% 0;
    overflow: hidden;
    width: 4000px;
    height: 4000px;
}
.num {
    font-size: 200px;
    color: #000;
    font-weight: bold;
    position: absolute;
    font-style: italic;
   bottom: 620px;
right: 590px;
}