在右上角添加一个响应标志

问题描述

如何添加右上角的美国国旗？它应该是敏感的。 它类似于纸折角，但折部分是美国国旗。 角落里的标志应该可以点击

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>