How can I make this star a one element only

Question

I've created this star in HTML and CSS but i'm trying to make it to a one element. This is what I have so far:

.star{
       margin:22px auto;left:0;right:0;
       width: 0px;
       height: 0px;
       border-right:  20px solid transparent;
       border-bottom: 14px  solid #e74c3c;
       border-left:   20px solid transparent; 
       position: absolute;
       transform:    rotate(35deg);
    }
       .star-2 {
       position: absolute;
       display: block;
       top: 0px;
       left: -20px;
       width: 0px;
       height: 0px;
       border-right: 20px solid transparent;
       border-bottom: 14px solid #e74c3c;
       border-left: 20px solid transparent;
       transform: rotate(-70deg);
    }
    .star-3{ 
       box-sizing:border-box;
       border-bottom: 15px solid #e74c3c;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
       position: relative; 
       height: 0;
       width: 0;
       top: -10px;
       left: -12px;
       display: block;
       transform: rotate(-35deg);
    }

    <div class="star">
      <div class="star-2">
      
      </div>
      <div class="star-3">
      
      </div>
    </div>

Is there anyway for me to make all of this just one element such as <div class="star"></div> and that's it?

[Star Shape](https://stackoverflow.com/questions/25384761/pure-css-star-shape)https://stackoverflow.com/questions/25384761/pure-css-star-shape — Rajat Sharma, Jul 01 '19 at 19:22
CSS clip-path offers a polygon option: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path as demonstrated https://lab.iamvdo.me/css-svg-masks/ — Jason Aller, Jul 01 '19 at 19:25

score 0 · Answer 1 · answered Jul 01 '19 at 19:22

Use ::before and ::after:

.star {
  margin:22px auto;left:0;right:0;
  width: 0px;
  height: 0px;
  border-right:  20px solid transparent;
  border-bottom: 14px  solid #e74c3c;
  border-left:   20px solid transparent; 
  position: absolute;
  transform:    rotate(35deg);
}

.star::before {
  position: absolute;
  display: block;
  content:'';
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after { 
  box-sizing:border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  content:'';
  position: relative; 
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

<div class="star"></div>

score 0 · Answer 2 · answered Jul 01 '19 at 19:23

with pseudo elements: https://jsfiddle.net/wwWaldi/hy4pbnzx/5/

    .star {
  margin: 22px auto;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  position: absolute;
  transform: rotate(35deg);
}

.star::before {
  content: '';
  position: absolute;
  display: block;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: '';
  box-sizing: border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: relative;
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

score 0 · Answer 3 · answered Jul 01 '19 at 19:24

Absolutely, you can use pseudo elements ::after and ::before in place of your .star-2 and .star-3

A little gotcha with these elements is that you need to give them a content property – an empty string is fine, content: '';

Here's your updated CSS and an example in Codepen:

.star {
  margin: 22px auto;
  left: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  position: absolute;
  transform: rotate(35deg);
}

.star::before {
  content: "";
  position: absolute;
  display: block;
  top: 0px;
  left: -20px;
  width: 0px;
  height: 0px;
  border-right: 20px solid transparent;
  border-bottom: 14px solid #e74c3c;
  border-left: 20px solid transparent;
  transform: rotate(-70deg);
}

.star::after {
  content: "";
  box-sizing: border-box;
  border-bottom: 15px solid #e74c3c;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  position: relative;
  height: 0;
  width: 0;
  top: -10px;
  left: -12px;
  display: block;
  transform: rotate(-35deg);
}

<div class="star"></div>

https://codepen.io/LL782/pen/rEdYoB

Naga Sai A · Answer 4 · 2019-07-01T19:31:26.133

0

To achieve expected result, use character entity and control size using font-size and star background using color

For reference, follow this link for different star options with differnt character entity codes - https://www.html.am/html-codes/character-codes/html-star-code.cfm

.star{
  font-size:200px;
  color: #e74c3c
}

 <div class="star">&#9733;
 </div>

codepen- https://codepen.io/nagasai/pen/NZYweL

edited Jul 01 '19 at 19:31

answered Jul 01 '19 at 19:24

Naga Sai A

10,771
1
21
40

How can I make this star a one element only

4 Answers4