Sharp borders using CSS - html

Question

I'm trying for tag SOLD OUT as shown in below figure
but able to achieve upto certain extend shown in below figure
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 1

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/

Answer 2

Try this, set backface-visibility:hidden
a{
text-decoration:none;
width:200px;
height:200px;
display:block;
position:relative;
overflow:hidden;
}
a > img{
width:100%;
height:100%;
}
a > .wp-sold-out-strip {
width: 180px;
color: #FFF;
font-size: 13px;
font-weight: bold;
position: absolute;
text-align: center;
background-color: #8760AF;
bottom:20px;
right:-30px;
transform:rotate(-30deg);
-webkit-backface-visibility:hidden;
}
<a href="some-href">
<img src="https://source.unsplash.com/user/erondu">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>

Answer 3

Here the solution!...
Try this code...
<div class="img-wraper">
<a href="some-href" class="">
<img src="img-url">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>
</div>
<style media="screen">
.img-wraper {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid #cccccc;
}
.img-wraper a {
display: block;
position: relative;
}
.img-wraper a img {
width: 100%;
height: 100%;
}
.wp-sold-out-strip {
position: absolute;
bottom: 20px;
right: -30px;
width: 142px;
transform: rotate(-33deg);
text-align: center;
background-color: #8760AF;
color: #FFF;
font-size: 13px;
font-weight: bold;
}
</style>

Answer 4

Here's another answer for you. Fiddle
What I did to set the parent element a position: relative and position: absolute on the banner. You can then more easily align the item with top and left.
It's also important to set the parent to overflow: hidden so that nothing appears to protrude outside your image. Finally, you need to override the default inline behavior of anchor tags so that you can align the banner properly.
I also increased the left padding for the text to make it appear centered.
.wp-sold-out-strip {
text-align: center;
background-color: #8760AF;
width: 170px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 7px 0 7px 14px;
position: absolute;
top: 107px;
left: -2px;
transform: rotate(-26deg);
}
a {
overflow: hidden;
position: relative;
width: 150px;
height: 150px;
display: inline-block;
}
<a href="some-href">
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>

Answer 5

Just add
height:30px;
line-height:28px;
and change this value:
margin-top: -70px;
Demo (new tag in orange, old in purple), enjoy:
.wp-sold-out-strip {
text-align: center;
background-color: tomato;
width: 142px;
height:30px;
line-height:28px;
color: #FFF;
font-size: 13px;
font-weight: bold;
padding: 0px 0px;
position: absolute;
margin-top: -70px;
transform: rotate(-26deg);
}
<a href="some-href">
<img src="http://i.stack.imgur.com/Nahj0.png">
<div class="wp-sold-out-strip">SOLD OUT</div>
</a>