javascript - 如何创建曲线css div？

Question

我只使用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;但不知道出了什么问题，因为什么也没发生。抱歉英语不好，这就是我想要做的。请帮忙。

标签： javascripthtmlcss

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 元素。然后在之前和之后使用下面的csspseudo-elements而不是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>