CODEWITHSUNDEEP
htmlcss
Mahesh.D
Mahesh.D

Reputation: 1689

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);    
}

Upvotes: 0

Views: 1322

Answers (5)

Theodore K.
Theodore K.

Reputation: 5176

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="https://i.sstatic.net/Nahj0.png">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

Upvotes: 0

Chris
Chris

Reputation: 59511

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>

Upvotes: 0

frnt
frnt

Reputation: 8795

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>

Upvotes: 1

Srikanth Reddy
Srikanth Reddy

Reputation: 345

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>

Upvotes: 0

Ivan Kovachev
Ivan Kovachev

Reputation: 402

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="https://i.sstatic.net/Mmww2.png">
  <div class="wp-sold-out-strip">SOLD OUT</div>
</a>

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

Upvotes: 3

Related Questions