我正在尝试标签 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);
}
最佳答案
你需要做一些事情:
- 设置 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>
关于html - 使用 CSS 的锐利边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38451638/