CODEWITHSUNDEEP
htmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Issue with CSS transform property - Can't adjust background color

I am trying to create a box with the text on left with rotate from top to bottom but can't handle the width of the background, background color is showing additional but when I reduce the width, height is also getting reduced, here is the JSFiddle for the code I have created.

Text should also start from top width should not be showing extra.

HTML Code is

<div class="box">
  <span>Vertical Text</span>
</div>

And the CSS is 

.box {
  position: relative;
  width: 100%;
  float: left;
  border: 2px solid #444;
  min-height: 150px;
  box-sizing: border-box;
}
.box > span {
  position: absolute;
  left: 0;
  top: 0;
  background: #f00;
  color: #fff;
  width: 150px;
  min-height: 150px;
  font-size: 14px;
  font-family: arial;
  transform: rotate(-90deg);
}

Result I am looking is as attached below

enter image description here

Upvotes: 0

Views: 203

Answers (3)

frnt
frnt

Reputation: 8795

Try this,

.box > span::before{
  content:'';
  position:relative;
  margin-left:70px;
}

Upvotes: 0

L&#246;&#246;ri
L&#246;&#246;ri

Reputation: 178

Example JsFiddle box-sizing: border-box; was the reason for the overflow

text-aling: right; will set text to top 

.box {
  position: relative;
  width: 100%;
  float: left;
  border: 2px solid #444;
  min-height: 150px;
}

.box > div {
  text-align: right;
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  margin: 0;
  background: #f00;
  color: #fff;
  width: 20px;
  min-height: 150px;
  font-size: 14px;
  font-family: arial;
  transform: rotate();
}

.box > div > p {
  transform: rotate(-90deg);
}
<div class="box">
  <div>
    <p>Text</p>
  </div>
</div>

Upvotes: 3

RajatPatel
RajatPatel

Reputation: 11

You are facing such problem because of border: 2px solid #444 property, as it takes up 2px from 150px of total width in drawing the border of the div. So the actual area width for the <span> would be 150px - (2px + 2px) = 146px (2px of border on either side)

If you set 

.box > span 
{
    text-align:right; 
    width: 146px;
    min-height: 146px;
}

It would resolve the issue.

Upvotes: 0

Related Questions