html - 图片的左上角显示 【推荐】、【热销】标签的效果，使用Css 如何实现呢？
问题描述
问题解答
回答1：一般使用绝对定位来解决
<p class='parent'><span class='text'>推荐</span><p class='triangle-topleft'></p> </p> .parent{position: relative;width: 200px;height: 200px; } .parent .text{display: inline-block;transform: rotate(-45deg);padding: 20px;color: #fff; } .triangle-topleft{width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;position: absolute;top: 0;z-index: -1; }回答2：
<!DOCTYPE html><html><head> <title></title></head><body><style type='text/css'> .main_img{ display: block; width: 90%; height: 4.954em; position: relative; overflow: hidden; margin-left: 0.742em; margin-top: 0.8em;}.main_img .new{ width: 3.25em; height: 3.25em; position: absolute; top: 0; left: 0; background-size: 3.25em 3.25em; background: url(http://m.lobo666.com/Public/image/main/new.png) no-repeat center;}</style><p class='main_img'> <!-- <a href='https://www.haobala.com/index.php/Home/Detail/index/id/364.html'> --> <a href='https://www.haobala.com/index.php/Home/Detail/index/id/364/aid/100004.html'> <img src='http://lobo.lobo666.com/Uploads/Building/61772d6d46.jpg'> </a> <!-- <p></p> --> <p class='new'></p> </p></body></html>
网公网安备