HTML
CSS
JS
Result
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Youtube logo using HTML and CSS</title> </head> <body> <div class="youtube-div"> <span class="inner-triangle"></span> </div> </body> </html>
CSS
body { min-height: 100vh; display: grid; place-items: center; } :root { --height: 85px; --width: 80px; } .youtube-div { position: relative; width: var(--width); height: var(--height); background-color: #e21; padding: 0 15px; border-radius: 50% / 11%; transform: scale(2); } .youtube-div::before { content: ""; position: absolute; background: inherit; top: 10%; bottom: 10%; right: -5%; left: -4.5%; border-radius: 5% / 50%; } .inner-triangle { width: 100%; height: var(--height); display: flex; align-items: center; justify-content: center; margin-left: 3px; } .inner-triangle::before { content: ""; z-index: 1; width: 0; height: 0; border-left: 25px solid #fff; border-top: 15px solid transparent; border-bottom: 15px solid transparent; }
JS
Youtube logo using HTML and CSS