html - 完整的弧形边框而不仅仅是 Angular 落

Question

我有一个模板照片可以为它创建 HTML。

问题在图像中用箭头标记。 slider 下方有一个部分有一个 flex 的边框(浅蓝色)，我试图用 border-radius 属性来实现它，我围绕它做了很多调整。毕竟只是拐 Angular 是 flex 的或者半径远远超过我需要的。我如何在 CSS 中实现它？谢谢。

Answer 1

您可以制作一个宽度超过 100% 的大元素，并为其添加 Border-radius。这是我的意思的一个例子:

.bigCircle {
  background: #ffffff;
  height:500px;
  width:200%;
  margin-left: -50%;
  border-radius: 100%;
  margin-top: 100px;
}

body {
  background: #000000;
  overflow-x: hidden;
}
.bigCircle {
  background: #ffffff;
  height:500px;
  width:200%;
  margin-left: -50%;
  border-radius: 100%;
  margin-top: 100px;
  border: 10px solid #00AAFF;
}

p {
  text-align: center;
  font-family: Arial, sans-serif;
}

<div class="bigCircle">
  <p> Wow you're huge!</p>
</div>

编辑:删除了 Codepen 链接并添加了代码片段。