html - 添加右上角的标志响应

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">

这对我来说真的不起作用。我到处都能看到丝带，但对我的旗帜不起作用。

标签： htmlcsstwitter-bootstrapresponsive

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>