About
Explore
Events & Classes
Support Us
Join
Sign In
Coding with Rumaysa
View Project Page
Run
Fullscreen
YouTube Square Logo (Pure CSS!)
HTML
CSS
JS
<!-- Created by Coding with Rumaysa, subject to copyright. --> <!DOCTYPE HTML> <html> <head> <title>Page Title</title> <meta charset="utf-8"> <meta name="author" content="Coding with Rumaysa"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="youtube-square"> <div class="youtube-play-btn"></div> </div> </body> </html>
.youtube-square { background-color: red; width: 480px; height: 300px; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); border-radius: 50px; } .youtube-play-btn { width: 0; height: 0; border-top: 60px solid transparent; border-left: 120px solid #fafafa; border-bottom: 60px solid transparent; left: 50%; top: 50%; position: absolute; transform: translate(-50%,-50%); }
About
Explore
Events & Classes
Support Us
Join
Sign In
