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

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>

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

add top right corner a flag responsive

html

css

twitter-bootstrap

responsive