需求場景
當(dāng)前端頁面需要展示皮膚是否在使用玻褪、書籍是否閱讀中肉渴、文件是否下載完成時，這時最直接的效果就是在盒子(div)左/右上角顯示相應(yīng)標(biāo)簽带射，不僅美觀且實用同规。
這里以制作圖片右上角標(biāo)簽為例，用CSS以最簡單窟社、直接的方式實現(xiàn)效果券勺。
實現(xiàn)效果
實現(xiàn)效果
實現(xiàn)思路
- 準(zhǔn)備兩個div（一個父容器，一個標(biāo)簽div）灿里，分別設(shè)置寬高关炼，并設(shè)置相對布局。
- 使標(biāo)簽div居于父容器右上角匣吊，設(shè)置內(nèi)容居中顯示儒拂，設(shè)置背景和字體顏色，旋轉(zhuǎn)該div色鸳。
- 將父容器設(shè)置overflow: hidden社痛，實現(xiàn)父容器對標(biāo)簽div超出部分的遮擋，即實現(xiàn)了標(biāo)簽效果命雀。
結(jié)構(gòu)展示
結(jié)構(gòu)展示
代碼示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>實現(xiàn)標(biāo)簽效果</title>
<style>
/* 外層div
設(shè)為relative
設(shè)置overflow: hidden實現(xiàn)對超出部分的 遮擋效果
*/
.img-box {
width: 200px;
height: 400px;
margin: 40px;
overflow: hidden;
position: relative;
}
/* 外層div
設(shè)為absolute蒜哀，加以top、right等屬性調(diào)整標(biāo)簽位置
設(shè)置height咏雌、line-height凡怎、text-align控制標(biāo)簽內(nèi)容水平垂直居中
設(shè)置transform，旋轉(zhuǎn)標(biāo)簽45度
*/
.tag {
width: 140px;
height: 25px;
top: 16px;
right: -40px;
text-align: center;
line-height: 25px;
transform: rotate(45deg);
position: absolute;
color: white;
background: #4188ab;
}
/* 圖片展示 設(shè)為block */
.img {
display: block;
width: 200px;
height: 400px;
}
</style>
</head>
<body>
<div class="img-box">
<div class="tag">正在使用</div>
<img class="img" src="..."/>
</div>
</body>
</html>
