首先看效果
思路：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;200px;overflow: hidden;'> <img style="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起作用。