需求場景
當前端頁面需要展示皮膚是否在使用、書籍是否閱讀中、文件是否下載完成時，這時最直接的效果就是在盒子(div)左/右上角顯示相應標簽，不僅美觀且實用。
這里以制作圖片右上角標簽為例，用CSS以最簡單、直接的方式實現效果。
實現效果
實現思路
結構展示
代碼示例
<!DOCTYPE html><html><head><meta charset="utf-8"><title>實現標簽效果</title><style>/* 外層div 設為relative 設置overflow: hidden實現對超出部分的 遮擋效果 */.img-box { width: 200px; height: 400px; margin: 40px; overflow: hidden; position: relative;}/* 外層div 設為absolute，加以top、right等屬性調整標簽位置 設置height、line-height、text-align控制標簽內容水平垂直居中 設置transform，旋轉標簽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;}/* 圖片展示 設為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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
