在右上角添加一个旗帜响应

Question

如何在右上角添加类似美国国旗的内容？它应该作出反应。它类似于纸的折叠角，但在折叠部分是美国国旗。角落里的标志应该是可点击的

#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;
}

<a href="#" class="flagCorner" id="triangle">

这对我真的不起作用。我到处都是丝带，但对我的国旗不起作用。

Answer 1

使用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% 0, 100% 100%);
}
#triangle {
filter:drop-shadow(0 0 5px red);
}

<div id="triangle"><a href="#" class="flagCorner" ></a></div>