Sharp Grenzen CSS

Question

Ich versuche für Tag SOLD OUT wie unten figure

in gezeigt aber in der Lage bis zu sicher erreichen erstreckt sich in der folgenden Abbildung

mit folgenden gezeigt 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

Sie müssen ein paar Dinge tun:

• die Eltern position-relative gesetzt (die in diesem Fall) und overflow-hidden.
• setzen das „ausverkauft“ 's width auf etwas, das und das Bild des überlaufen height und width-100% die Eltern

Sie werden die position:relative des Mutter müssen zu füllen, so das ‚ausverkauft‘ wird auf den Ausgang ausgerichtet, wenn position:absolute und der overflow:hidden auf ihn angewendet werden.

.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

Hier die Lösung! ...

diesen Code Versuchen ...

<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 3

die Sie interessieren, setzen Sie 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 4

Hier ist eine andere Antwort für Sie. Fiddle

Was ich getan habe, um das Elternelement eine position: relative und position: absolute auf dem Banner zu setzen. Sie können den Artikel dann einfacher mit top und left ausrichten.

Es ist auch wichtig, das übergeordnete Element auf overflow: hidden zu setzen, damit nichts aus Ihrem Bild herausragt. Schließlich müssen Sie das Standardverhalten inline von Anker-Tags überschreiben, damit Sie das Banner richtig ausrichten können.

Ich habe auch die linke Füllung für den Text erhöht, damit er zentriert erscheint.

.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

Fügen Sie einfach

height:30px; 
line-height:28px; 

und diesen Wert ändern:

margin-top: -70px; 

Demo (neuer Tag in orange, alt in lila), genießen:

.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>