Question

所以这就是我想要完成的......

我想放置一个完美的正方形，它总是覆盖一个角或两个角，而不会在div的右上角过去......无论需要渐变角效果的div的大小或尺寸如何

我想这样做的原因是我可以在网站各个部分的角落添加渐变效果，因为很多设计师都要求我这样做。

最简单的方法是使用渐变的透明PNG文件...并将其高度，宽度，最大高度和最大宽度设置为100％并将其固定为有问题的div的右上角。

但是，我太固执了！

这应该可以使用纯CSS！

我似乎无法弄清楚如何。

我已尝试嵌套多个响应式方形div并旋转它们但无济于事。

我觉得我太累了，希望能在早上回答我自己的问题！

感谢阅读。

Answer 1

你可以使用psedu元素：after或：before

Answer 2

您可以在CSS中使用位置绝对逻辑。

尝试这个概念。

＆＃13;

.container {
  width: 25%;
  position: relative;
  background: #ccc;
  border: 1px solid #333;
  padding: 10px 15px;
}

.corner-element {
  width: 42px;
  height: 42px;
  background: red;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

＆＃13;

<div class="container">
  <div class="corner-element"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div>

＆＃13;

纯CSS中的响应式响应方块位于任何大小的div元素的右上角 - 可能吗？

2 个答案: