84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
人生最曼妙的风景，竟是内心的淡定与从容！
一般使用绝对定位来解决
<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; }
<!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="/index.php/Home/Detail/index/id/364.html"> --> <a href="/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>
一般使用绝对定位来解决