javascript - 如何在css div中创建曲线？

Question

这个问题已经有答案了:

How to create a curved line with gradient? (1 个回答)

已关闭 3 年前。

我只使用 css、div。我正在尝试绘制这些类型的线条:

.line {
    width: 1px;
    height: 100px;
    background-color: black;
    position: absolute;
    border-radius: 50%/100px 100px 0 0;
}

#line1 {
    top: 100px;
    left: 50px;
    
}
#line2 {
    top: 220px;
    left: 150px;
    height: 115px;

    transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
}

<div class="line" id="line1"></div>
<div class="line" id="line2"></div>

我正在尝试使用border-radius: 50%/100px 100px 0 0;但不知道出了什么问题，因为什么也没发生。抱歉英语不好，这就是我想做的。请帮忙。

Answer 1

您可以使用 SVG 来实现您想要的目的。请参阅下面的代码

在此处阅读更多信息 -> SVG

<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
  <path d="M 5 50 C 40 10, 65 10, 75 40 S 100 100, 180 20" stroke="black" fill="transparent"/>
</svg>

编辑:如果您不能使用 SVG 或除 div 元素之外的其他解决方案。和 css 你可以使用它。

如果只能使用 1 个 DIV 元素。然后在之前和之后的pseudo-elements上使用下面的CSS，而不是line1和line2

.line1 {
  border-radius:100px 0 0 0 ;
  border-width: 2px 0 0 2px;
  margin-left:100px;
  }

.line2 {

  border-radius:0 0 100px 0 ;

  border-width: 0 2px  2px 0 ;

  }
  .line {
      border-color:red;
  border-style: solid;
    height:100px;
  width: 100px;
  }

<div class="line line1"></div>
<div class="line line2"></div>