Connect with us!
Creating Six Sided Star for rating using HTML and CSS
One of the best way to implementing rating or any feedback using website is by creating star. Shape of the star can be a six side or a five side and the choose depends on your preference. In this article we will see how to create a Six Sided Star using HTML and CSS.
CSS Properties Definitions
- The border-bottom property specifies the bottom parallel side.
- The border-left property specifies the unparallel side on the left.
- The border-right property specifies the right unparallel side.
Code Block
Following is the code for creating Six Side Star
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellow;
position: absolute;
content: "";
top: 30px;
left: -50px;
}Here is the Output:
Video Tutorial
You can find the complete coding tutorial in the following YouTube Video
Here is the complete HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.star-six {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid yellow;
position: relative;
}
.star-six:after {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid yellow;
position: absolute;
content: "";
top: 30px;
left: -50px;
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Six Sided Star</h1>
<div class="star-six"></div>
</body>
</html>Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!
