Mahesh.D Mahesh.D - 4 months ago 13
CSS Question

Sharp borders using CSS

I'm trying for tag

SOLD OUT
as shown in below
figure


enter image description here

but able to achieve upto certain extend shown in below figure

enter image description here

using following HTML & CSS

<a href="some-href">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>

.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 142px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);
}

Answer

You need to do a few things:

  • set the parent's position to relative(the in your case) and overflow to hidden.
  • set the "sold out"'s width to something that will overflow and the image's height and width to 100% to fill the parent

You'll need the position:relative of the parent so the "sold out" will be aligned to its parent when position:absolute and the overflow:hidden will be applied to it.

.parent {overflow: hidden; position: relative; display: block; width: 200px; height: 200px;}
.parent img { width: 100%; height: 100%;}
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 242px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -47px;
transform: rotate(-26deg);    
}

<a href="some-href" class="parent">
  <img src="http://i.stack.imgur.com/Mmww2.png">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

https://jsfiddle.net/ivankovachev/snxt61an/

Comments