html - 具有响应圆 Angular 的响应矩形

Question

我有一个响应式正方形的工作示例，它带有随视口(viewport)缩放的圆 Angular 。请查看下面的代码片段并忽略我在 .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%;
}

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

HTML

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

CSS

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

这是在 Codepen 上呈现的代码这样你就明白我的意思了。

关于如何实现更圆 Angular 的任何建议，这些圆 Angular 也将响应类似于方形示例？

Answer 1

您正在使用 % 作为四舍五入的单位。但是，除非您的视口(viewport)是正方形，否则 1% 的高度将与 1% 的宽度不同，导致您的 Angular (或 CSS 中的任何其他内容)不均匀。您可以使用固定单位轻松解决此问题，例如 px。

但是，由于您仍然希望 border-radius 随视口(viewport)的大小而变化，您可以使用 vh (viewport-height) 或 vw (viewport-width) 作为边界半径的单位。它们的作用类似于 % 单元，除了您可以指定是使用视口(viewport)的高度还是宽度作为引用。

例如，下面的 CSS 应该可以工作:

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