Connect with us!

Making pretzel using HTML and CSS tutorial for beginners using VSCode

Salow
January 2, 2022
CSS, Shape

Pretzel comes from regional German elocution, standard German: Breze(l) and is a kind of prepared cake produced using mixture that is regularly molded into a bunch. The conventional pretzel shape is an unmistakable even structure, with the closures of a long piece of batter entwined and afterward bent back onto itself with a certain goal in mind (a pretzel circle or pretzel bow).

Have you ever wondered how to create Pretzel using CSS? In this article we will be coding the Pretzel symbol

Table of Contents

Pretzel CSS Code Block

.pretzel {
  position: relative;
  width: 106px;
  height: 50px;
  box-sizing: content-box;
}
.pretzel:before,
.pretzel:after {
  content: "";
  box-sizing: content-box;
  position: absolute;
  width: 30px;
  height: 60px;
  border: 20px solid rosybrown;
  border-radius: 50px 50px 0 50px;
  transform: rotate(-45deg);
}
.pretzel:after {
  left: auto;
  right: 0;
  border-radius: 50px 50px 50px 0;
  transform: rotate(45deg);
}

Here is the output:

Pretzel

Video Tutorial for Pretzel CSS

You can find the complete coding in the following YouTube Video

How to make a pretzel using HTML and CSS

Here is the complete HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .pretzel {
        position: relative;
        width: 106px;
        height: 50px;
        box-sizing: content-box;
      }
      .pretzel:before,
      .pretzel:after {
        content: "";
        box-sizing: content-box;
        position: absolute;
        width: 30px;
        height: 60px;
        border: 20px solid rosybrown;
        border-radius: 50px 50px 0 50px;
        transform: rotate(-45deg);
      }
      .pretzel:after {
        left: auto;
        right: 0;
        border-radius: 50px 50px 50px 0;
        transform: rotate(45deg);
      }
    </style>
    <title>Salow Studios</title>
  </head>
  <body>
    <h1>Icon Design</h1>
    <div class="pretzel"></div>
  </body>
</html>