Question

我有一个响应正方形的工作示例，该正方形具有随视口缩放的圆角。请查看下面的代码片段，并忽略我在.diamond类选择器中进行的其他一些转换：

HTML

<div class="diamond"></div>

CSS

.diamond {
  width: 75%;
  background-color: #7FDBFF;
  background-image: linear-gradient(#ff52bf, #9a52ff);
  transform: rotate(315deg);
  border-radius: 8%;
  position: absolute;
  right: -375px;
  top: -400px;
}

.diamond:after {
  content:"";
  display: inline-block;
  padding-bottom: 100%;
}

现在，我尝试将类似的逻辑应用于矩形，但是，圆角在侧面与顶部和底部之间以不同的角度逐渐变细，而不是在每个顶点上均匀变细。这是我到目前为止的内容：

HTML

<div class="rectangle"></div>

CSS

.rectangle{
    width: 75%;
    background: #F9FAFE;
    border-radius: 8%;
}
.rectangle:after{
    content: "";
    display: inline-block;
    padding-bottom: 50%;
}

这是在Codepen上呈现的代码，因此您可以了解我的意思。

关于如何实现更多圆角的建议也类似于方形示例吗？

Answer 1

您使用%作为舍入单位。但是，除非您的视口是正方形，否则高度的1％将与宽度的1％相同，从而导致角（或CSS中的其他任何东西）不一致。您可以使用固定单位（例如px）轻松解决此问题。

但是，由于您仍然希望border-radius随视口的大小而变化，因此您可以将vh（视口高度）或vw（视口宽度）用作边界半径的单位。除了您可以指定使用视口的高度还是宽度作为参考之外，这些单元的作用类似于%单元。

例如，以下CSS应该可以工作：

.rectangle{
  width: 75%;
  background: #F9FAFE;
  border-radius: 8vh;
}

Answer 2

如前所述，每个轴的百分比都会变化，因此不适用于您的情况。尽管视口的高度（vh）和宽度（vw）可以更好地工作，但是您可能要考虑使用rem单位，该单位基于html元素的字体大小。这不会随着窗口大小的改变而改变，您可以通过使用视口宽度（vw）单位设置基本字体大小来轻松地使其缩放/响应。

带有响应圆角的矩形

2 个答案: