cssカスタマイズ

◆radial-gradient()で描く


◆html
<div class="hinomaru1"></div>

◆css
.hinomaru1
{
width:450px;
height:300px;
background-color:white;
background-image:radial-gradient(circle closest-side,#be003f 60%,transparent 60%);
border:1px solid;
}

◆border-radiusで描く


◆html
<div class="hinomaru2"></div>

◆css
.hinomaru2
{
width:450px;
height:300px;
background-color:#ffffff;
border:1px solid;
position:relative;
}
.hinomaru2::before
{
content:"";
display:block;
width:40%;
height:60%;
background-color:#be003f;
border-radius:50%;
position:absolute;
top:20%;
left:30%;
}