如何解决在右上角添加一个响应标志
如何添加右上角的美国国旗?它应该是敏感的。 它类似于纸折角,但折部分是美国国旗。 角落里的标志应该可以点击
ServiceMonitor
#triangle {
right: 0;
width: 0;
height: 0;
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
border-top: 100px solid ;
border-left: 100px solid transparent;
position: absolute;
}
这对我真的没有用。我到处都看到丝带,但没有为我的旗帜打工。
解决方法
使用clip-path
#triangle {
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
clip-path: polygon(0 0,100% 0,100% 100%);
}
<a href="#" class="flagCorner" id="triangle"></a>
带有阴影的您可以考虑使用额外的包装器
#triangle a{
background-image: url('https://images-na.ssl-images-amazon.com/images/I/612hQjoIpCL._AC_SL1446_.jpg');
background-size: cover;
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
clip-path: polygon(0 0,100% 100%);
}
#triangle {
filter:drop-shadow(0 0 5px red);
}
<div id="triangle"><a href="#" class="flagCorner" ></a></div>