CODEWITHSUNDEEP
javascripthtmlcss
Suraj-Ui
Suraj-Ui

Reputation: 196

How to create this icon with text inside?

I have already created burst put facing problem with putting number inside burst.So i need help for fix it Need to look like Image burst.

enter image description here

#burst-8 {
  background: #00aaad;
  width: 15px;
  height: 15px;
  margin: 4px;
  color: white;
  position: absolute;
  text-align: center;
  transform: rotate(45deg);
}

#burst-8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  color: white;
  width: 15px;
  background: #00aaad;
  transform: rotate(45deg);
}
<div id="burst-8"></div>

Upvotes: 2

Views: 188

Answers (4)

akhtarvahid
akhtarvahid

Reputation: 9769

#burst-8 {
  background: #00aaad;
  width: 15px;
  height: 15px;
  margin: 4px;
  font-size: 12px;
  position: absolute;
  text-align: center;
}
#burst-8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  color: white;
  width: 15px;
  background: #00aaad;
  transform: rotate(45deg);
  z-index: -1;
}
<div id="burst-8">99</div>

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

First you don't need to rotate the div element rotate only pseudo element and then setting pseudo element to the lower level than div element with z-index can fix it.

Positions work as layering of elements and z-index handles layer order.

#burst-8 {
  background: #00aaad;
  width: 25px;
  height: 25px;
  margin: 4px;
  color: white;
  position: absolute;
  text-align: center;
  font-size: 12px;
  line-height:25px;
}

#burst-8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background: #00aaad;
  transform: rotate(45deg);
  z-index: -1;
}
<div id="burst-8">99</div>

Upvotes: 2

User863
User863

Reputation: 20039

Try setting content property

#burst-8 {
  background: #00aaad;
  width: 15px;
  height: 15px;
  margin: 4px;
  color: white;
  position: absolute;
  text-align: center;
  transform: rotate(-45deg);
}

#burst-8:after {
  content: "99";
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  color: white;
  width: 15px;
  font-size: 13px;
  background: #00aaad;
  transform: rotate(45deg);
}
<div id="burst-8"></div>

Using attr() 

#burst-8 {
  background: #00aaad;
  width: 15px;
  height: 15px;
  margin: 4px;
  color: white;
  position: absolute;
  text-align: center;
  transform: rotate(-45deg);
}

#burst-8:after {
  content: attr(data-burst);
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  color: white;
  width: 15px;
  font-size: 13px;
  background: #00aaad;
  transform: rotate(45deg);
}
<div id="burst-8" data-burst="99"></div>

Upvotes: 2

CHANist
CHANist

Reputation: 1402

Not exactly sure what you want, see if the following answer helps.

#burst-8 {
  background: #00aaad;
  width: 15px;
  height: 15px;
  margin: 4px;
  font-size: 12px;
  position: absolute;
  text-align: center;
}
#burst-8:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  color: white;
  width: 15px;
  background: #00aaad;
  transform: rotate(45deg);
  z-index: -1;
}
<div id="burst-8">99</div>

Upvotes: 3

Related Questions