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

CSS Six Side

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!

Creating Six Sided Star for rating using HTML and CSS

CSS Properties Definitions

Code Block

Video Tutorial