YouTube Icon using HTML5 and CSS3

Salow
January 2, 2022
CSS, Shape

Youtube is one of the world’s biggest online video sharing platform by Google. Have you ever wondered how to create youtube symbol? It can be created easily by using pure CSS. In this tutorial we will be implementing it.

Here is the code for creating the Youtube icon.

.youtube {
    position: relative;
    width: 200px;
    height: 150px;
    margin: 20px 0;
    background: red;
    border-radius: 50% / 10%;
    color: white;
    text-align: center;
    text-indent: 0.1em;
}
.youtube::after {
    content: "";
    position: absolute;
    top: 10%;
    bottom: 10%;
    right: -5%;
    left: -5%;
    background: inherit;
    border-radius: 5% / 50%;
}
.triangle {
    z-index: 1;
    position: absolute;
    border-left: 60px solid white;
    border-top: 35px solid transparent;
    border-bottom: 35px solid transparent;
    top: 25%;
    left: 37.5%;
}

Here is the Output:

You can find the complete coding tutorial in the following YouTube Video

Here is the complete code creating YouTube Symbol using HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .youtube {
        position: relative;
        width: 200px;
        height: 150px;
        margin: 20px 0;
        background: red;
        border-radius: 50% / 10%;
        color: white;
        text-align: center;
        text-indent: 0.1em;
      }

      .youtube::after {
        content: "";
        position: absolute;
        top: 10%;
        bottom: 10%;
        right: -5%;
        left: -5%;
        background: inherit;
        border-radius: 5% / 50%;
      }
      .triangle {
        z-index: 1;
        position: absolute;
        border-left: 60px solid white;
        border-top: 35px solid transparent;
        border-bottom: 35px solid transparent;
        top: 25%;
        left: 37.5%;
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Infinity Symbol</h1>
    <div class="youtube">
      <div class="triangle"></div>
    </div>
  </body>
</html>

Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!

See you in another tutorial!