用 CSS 创建对角曲线答案

【问题标题】：Creating Diagonal Curved Line with CSS用 CSS 创建对角曲线
【发布时间】：2021-10-26 05:47:56
【问题描述】：

我正在尝试用 CSS 创建两条对角曲线。

我正在尝试创建的内容：

到目前为止我所取得的成就：

我已经尝试过使用边框，到目前为止我的代码：

.bottom-circle {
  width: 45%;
  height: 50px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-left: 2px dashed #c6c6c6;
  border-right: 2px dashed #c6c6c6;
  margin: 0 auto;
}

&lt;div class="bottom-circle"&gt;&lt;/div&gt;

我花了几个小时试图解决这个问题，但到目前为止没有运气。我想知道如何以最简单的方式做到这一点？谢谢

【问题讨论】：

到目前为止做得很好：) 如果您想要完全相同，您可以使用 SVG。
这可能会有所帮助：stackoverflow.com/questions/26961221/how-to-make-an-oval-in-css 因为您基本上是在使用形状的边框来创建这些线条。

标签： html css

【解决方案1】：

您可以使用 ::before 在 div 内创建一个完整的圆圈，并通过像这样隐藏溢出来隐藏它的一半

.bottom-circle {
  width: 400px;
  height: 50px;
  position:relative;
  overflow:hidden;
  margin: 0 auto;
}
.bottom-circle:before{
  content:'';
  position:absolute;
  top:-300px;
  left:0;
  width:400px;
  height:400px;
  border-radius:100%;
  border: 2px dashed #c6c6c6;
  box-sizing:border-box
 }

<div class="bottom-circle">

</div>

【讨论】：