cssカスタマイズ

◆border-radiusとborderで描く


◆html
<div class="risingsun">
<div class="risingsun1">
<div class="risingsun2">
<div class="risingsun3">
<div class="risingsun4">
</div>
</div>
</div>
</div>
</div>

◆css
/*-------------------
　　　生地
-------------------*/
.risingsun,
.risingsun1,
.risingsun2,
.risingsun3,
.risingsun4
{
width:4500px;
height:3000px;
overflow:hidden;
position:relative;
}
/*-------------------
　　　旭日
-------------------*/
.risingsun::before
{
content:"";
display:block;
width:1500px;
height:1500px;
background-color:#be003f;
border-radius:50%;
position:absolute;
top:750px;
left:1000px;
}
/*-------------------
　　　旭光
-------------------*/
.risingsun1::before,.risingsun1::after,
.risingsun2::before,.risingsun2::after,
.risingsun3::before,.risingsun3::after,
.risingsun4::before,.risingsun4::after
{
content:"";
display:block;
width:0;
height:0;
border-top:10000px solid #be003f;
border-bottom:10000px solid #be003f;
border-right:984.9140335px solid transparent;
border-left:984.9140335px solid transparent;
position:absolute;
top:-8500px;
left:765.0859665px;
}
/*-------------------
　　　旭光　傾き
-------------------*/
.risingsun1::after{transform:rotate(90deg);}
.risingsun2::before{transform:rotate(22.5deg);}
.risingsun2::after{transform:rotate(-22.5deg);}
.risingsun3::before{transform:rotate(45deg);}
.risingsun3::after{transform:rotate(-45deg);}
.risingsun4::before{transform:rotate(67.5deg);}
.risingsun4::after{transform:rotate(-67.5deg);}
/*-------------------
　　　サイズ
-------------------*/
.risingsun
{
background-color:white;
transform-origin:top left;
transform:scale(0.1);
outline:calc(1px/0.1) solid;
margin-bottom:calc(-3000px*(1 - 0.1));
}
/*--------------------------------------------------------------------------
・旭日旗のオリジナルのサイズは縦3000px×横4500px
・これをtransform:scale(0.1);で10%に縮小している
・outlineとmargin-bottomに同じ縮小率を入れると自動的に計算される
--------------------------------------------------------------------------*/