I have before like below and I want rotate just background not label.

How I can do it ?

div {
  width: 50px;
  height: 5px;
  position: relative;
  background: #ff756b;
  margin-top: 55px;
}

div::before {
  content: 'lable';
  position: absolute;
  left: -5px;
  top: -33px;
  background: red;
  color: white;
  border-radius: 20px 20px 3px 20px;
  transform: rotate(45deg);
  width: 22px;
  height: 22px;
}

<div></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

    transform: rotate (45deg);

Will rotate the complete element, including content and background.

If you want to rotate only the background then you need to keep the background separate or you can add your label in actual element instead of pseudo-element.

CodePudding user response：

You can add :after with div and add content

div {
  width: 50px;
  height: 5px;
  position: relative;
  background: #ff756b;
  margin-top: 55px;
}
div:after {
  content: 'Lable';
  font-size: 11px;
  position: absolute;
  left: -5px;
  top: -29px;
  color: #fff;
 }
div::before {
  content: '';
  position: absolute;
  left: -5px;
  top: -33px;
  background: red;
  color: white;
  border-radius: 20px 20px 3px 20px;
  transform: rotate(45deg);
  width: 22px;
  height: 22px;
}

<div></div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can put the text into an after pseudo element which is not rotated.

div {
  width: 50px;
  height: 5px;
  position: relative;
  background: #ff756b;
  margin-top: 55px;
}

div::before,
div::after {
  position: absolute;
  left: -5px;
  top: -33px;
  width: 22px;
  height: 22px;
}

div::before {
  content: '';
  background: red;
  border-radius: 20px 20px 3px 20px;
  transform: rotate(45deg);
}

div::after {
  content: 'lable';
  color: white;
}

<div></div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

However, be aware of accessibility issues. That text may not get read out by a screen reader and if it is important for the user to know it is there is may be better to put the text in a label element actually within the HTML. You can still style it the same way so it is within the red 'bubble'.