Create angled elements using html and css only - html

Question

How to create the offer div with a background color using html and css only ?
What I'm asking is width and height of the offer div should be same as in picture.
I created this using html and CSS. However part of div is hidden in my solution because offer div has a larger width and height.
Code I have written :
.offer-text-wrapper {
display: inline-block;
position: absolute;
top: -39px;
left: -36px;
color: #FFF;
height: 72px;
width: 75px;
background: #f44336;
transform: rotate(-43deg);
}
.offer-text {
-moz-transform: rotate(-40deg);
-o-transform: rotate(-40deg);
display: inline-block;
margin-left: 21px;
line-height: 124px;
}
<div class="offer-text-wrapper">
<span class="offer-text"> Offer </span>
</div>
Edit :
Because width and height of offer-text-wrapper is larger, I'm having below issue when I added that to the bootstrap grid.

Answer 1

Have a look at the code snippet, it's basically just changing dimensions and position until you're happy with it.
Is this what you mean?
.offer-container { /* added container to show effect better */
width: 200px;
height: 100px;
overflow: hidden;
position: relative;
border: 1px solid #ccc;
border-radius: 12px;
margin: 40px;
}
.offer-text-wrapper {
display: inline-block;
position: absolute;
top: -29px;
left: -40px;
color: #FFF;
height: 72px;
width: 95px;
background: #f44336;
transform: rotate(-45deg);
text-align: center;
}
.offer-text {
display: inline-block;
line-height: 114px;
}
<div class="offer-container">
<div class="offer-text-wrapper">
<span class="offer-text">Offer</span>
</div>
</div>