CSS Bola Billiard
Langsung saja untuk membuatnya kalian bisa menggunakan kode berikut ini.
<style>
div.ball {
width: 100px;
height: 100px;
margin-top: 10px;
margin-left: 10px;
background-color: #ff0000;
border-radius: 50%;
box-shadow: inset 0px -40px 50px rgba(0,0,0,.4);
position: relative;
text-align: center;
}
div.ball>div.ball-l1-border {
position: absolute;
background-color: white;
box-shadow: inset 0px -30px 50px rgba(0,0,0,.3);
border-radius: 50%;
top: 10px;
left: 10px;
width: 80px;
height: 80px;
}
div.ball>div.ball-l2-border {
position: absolute;
background-color: #ff0000;
border-radius: 50%;
box-shadow: inset 0px -30px 50px rgba(0,0,0,.3);
top: 15px;
left: 15px;
width: 70px;
height: 70px;
}
div.ball>div.ball-l3-border {
position: absolute;
background-color: white;
border-radius: 50%;
box-shadow: inset 0px -30px 50px rgba(0,0,0,.3);
top: 17px;
left: 17px;
width: 66px;
height: 66px;
}
div.ball-l3-border>span.lottery-numb {
font-size: 50px;
display: inline-block;
padding-top: 5px;
}
.container {
display: flex;
width: 500px;
margin-left: auto;
margin-right: auto;
}
</style>
<div class="container">
<div class="ball">
<div class="ball-l1-border"></div>
<div class="ball-l2-border"></div>
<div class="ball-l3-border">
<span id="lotteryNumber1" class="lottery-numb">9</span>
</div>
</div>
<div class="ball">
<div class="ball-l1-border"></div>
<div class="ball-l2-border"></div>
<div class="ball-l3-border">
<span id="lotteryNumber1" class="lottery-numb">9</span>
</div>
</div>
<div class="ball">
<div class="ball-l1-border"></div>
<div class="ball-l2-border"></div>
<div class="ball-l3-border">
<span id="lotteryNumber1" class="lottery-numb">9</span>
</div>
</div>
</div>