html - 使用 CSS 的锐利边框

Question

我正在尝试标签 SOLD OUT 如下图所示 figure

但能够达到如下图所示的一定程度

使用以下 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

你需要做一些事情:

• 设置 parent 的position至 relative (在你的情况下)和 overflow至 hidden .
• 设置“售罄”的width到会溢出的东西和图像的height和 width至 100%填充父级

您需要 position:relative父级的，因此“售罄”将在 position:absolute 时与其父级对齐和 overflow:hidden将应用于它。

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