JSFiddle - React, Tailwind, and code Playground
HTML
<!-- Bola de dragon de una estrella hecha por Carlos Sanchidrián García -->
<div id="bola">
<div id="estrella">
<div class="punta"></div>
<div class="punta"></div>
<div class="punta"></div>
<div class="punta"></div>
<div class="punta"></div>
<div id="relleno"></div>
</div>
</div>
<div id="sombra"></div>
<div id="reflejo"></div>
CSS
#bola
{
width:250px;
height:250px;
background:rgb(255,170,0);
/*border:10px solid rgb(255,181,0);*/
border:10px solid transparent;
border-radius:2000px;
}
#sombra
{
width: 225px;
height: 225px;
position: absolute;
top: 12px;
left: 12px;
border-radius: 2000px;
background: #FA9600;
box-shadow: 0px 0px 10px 2px #FA9600, 50px 50px 100px -20px rgba(0,0,0,0.1) inset;
}
#reflejo
{
width:150px;
height:150px;
position:absolute;
top:25px;
left:25px;
border-radius:2000px;
background:transparent;
box-shadow:20px 20px 100px -20px rgba(255,255,255,0.7) inset;
}
#relleno
{
width:10px;
height:10px;
background:#DE4A00;
position:absolute;
top:140px;
left:125px;
z-index:99999;
}
.punta
{
border-width: 10px 10px 20px 10px;
border-color: transparent transparent #DE4A00 transparent;
border-style: solid;
width: 0px;
height: 0px;
position: absolute;
top: 112px;
left: 120px;
z-index:99999;
}
.punta:nth-child(2)
{
top: 120px;
left: 117px;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);
border-color: transparent transparent #DE4A00 transparent;
}
.punta:nth-child(3)
{
top: 120px;
left: 123px;
-webkit-transform: rotate(-40deg);
-moz-transform: rotate(-40deg);
transform: rotate(-40deg);
}
.punta:nth-child(4)
{
top: 137px;
left: 124px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
}
.punta:nth-child(5)
{
top: 137px;
left: 116px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}