2

I was inspecting and learning shapes through css, and i got stumped by how the css even forms this figure. I tried changing the colors of the borders, but it does not even make sense, as it does not represent the outline of the original shape anyways, and before i put position: absolute the figure doesn't look anything like the final picture, but as soon as I place that line, it all just sticks together and transforms into the shape I pictured.

#star-six {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid red;
      position: relative;
    }
    #star-six:after {
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-top: 100px solid red;
      position: absolute;
      content: "";
      top: 30px;
      left: -50px;
    }
<div id='star-six'></div>
SomeoneMysterious
  • 39
  • 5

1 Answers1

1

In CSS we make triangles using the border width. A six point star is nothing but two triangles places over one another in inverted position.

The first part of your code snippet makes a simple triangle. (Try commenting the :after part)

To make another triangle one could have used another div and position it over the first. But to accommodate it in a single class we have pseudo elements (:after). It is used to create inverted triangle.

Now coming to your second question why position absolute is needed. It is used to position the second triangle over the first one in inverted manner. You can see position relative is given #star-six.

Hope this helps. If needed I can share codepen link to explain it well.

Codepen Link

Refer above link for code
Milind Sharma
  • 111
  • 5