Can someone help me please, I want to draw a 🌙️ using only one ‹div› | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

Can someone help me please, I want to draw a 🌙️ using only one ‹div›

HTML / CSS

23rd Dec 2018, 11:35 PM
Alexis-ng
Alexis-ng - avatar
6 Answers
+ 7
Alexis Mavy NGOYI MOUSSOUNDA I found this at stackoverflow.com and I edited it to suit your question...😃😃😃 HTML--> <div class = "moon" ></div> CSS--> .moon { background-color : #fff; width : 50px ; height : 50px ; border-radius: 50%; border: 4px solid #fff; box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999; -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999; transform:rotate(270deg); } } code source: https://stackoverflow.com/questions/34803334/css3-moon-shape
23rd Dec 2018, 11:53 PM
Ikechukwu Okonkwo
Ikechukwu Okonkwo - avatar
24th Dec 2018, 2:24 AM
AL Araf
AL Araf - avatar
+ 5
div { width: 200px; height: 200px; background-color: #fff000; border-radius: 50%; } div:after { content: ""; width: 200px; height: 200px; background-color: #333; border-radius: 50%; position: absolute; top: -30px; left: -30px; } https://code.sololearn.com/WLpr5ylG67l0/?ref=app
24th Dec 2018, 7:12 AM
Calviղ
Calviղ - avatar
+ 1
<div id="moon">🌙️</div>
24th Dec 2018, 9:48 AM
Микола Федосєєв
Микола Федосєєв - avatar
+ 1
Thanks a lot !
24th Dec 2018, 10:44 AM
Alexis-ng
Alexis-ng - avatar
- 1
Thank a lot, but it's not really the moon I was looking for, but the geometric figure
24th Dec 2018, 12:09 AM
Alexis-ng
Alexis-ng - avatar