首先看效果
思路：1、去掉“絲帶“菱角使用的是overflow: hidden;
2、通過z-index降低圖片的優先級或者調高“絲帶”優先級來實現覆蓋效果（z-index需要寫在有position的元素上面，並且后面的元素默認優先級比前面高）
3、父級元素使用position:relative，子級元素使用position:absolute，進行定位。
4、通過transform來旋轉“絲帶”
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/css"> .sidai{ display: inline-block; text-align: center; width: 200px; height: 20px; position: absolute; top: 200px; left: 60px; transform: rotate(315deg); -ms-transform: rotate(315deg); -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg); border: 1px dashed; background: #57DD43; } </style> <body> <div style='text-overflow:ellipsis; white-space:nowrap;position:relative;width:200px;overflow: hidden;'> <img style="width:100%; height: 100%;" src="123.jpg"/><span class="sidai">絲帶效果</span> </div> </body> </html>
transform: rotate(315deg); -ms-transform: rotate(315deg); -moz-transform: rotate(315deg); -webkit-transform: rotate(315deg); -o-transform: rotate(315deg);
是為了適應不同瀏覽器的旋轉效果。默認以中心為軸，順時針旋轉。
text-overflow:ellipsis; white-space:nowrap
是為了讓overflow:hidden起作用。