Connect with us!
![](https://www.salowstudios.com/wp-content/uploads/2021/12/Creating-a-square-using-HTML-and-CSS-20.png)
Making pretzel using HTML and CSS tutorial for beginners using VSCode
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:
![](https://www.salowstudios.com/wp-content/uploads/2022/01/pretzel.png)
Video Tutorial for Pretzel CSS
You can find the complete coding in the following YouTube Video
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>