曲线符号的 CSS3答案

【问题标题】：CSS3 for Curve Symbol曲线符号的 CSS3
【发布时间】：2020-03-05 18:01:56
【问题描述】：

我正在寻找以下形状的 css 代码，我尝试使用边框半径，但必须使用不同的 div 来处理上边框和左曲线。我正在寻找在下面绘制完整形状的 css。有什么帮助吗？

.Curve{
    top: 25px;
    left: 25px;
    width: 50px;
    border: solid 1px #4C5D65;
    height: 86px;
    content: " ";
    padding: 0px;
    position: absolute;
    transform: rotate(271deg);
    border-color: transparent transparent #4C5D65 transparent;
    border-radius: 0 0 51px 99%/44px;
	}

&lt;span class="Curve"&gt; &lt;/span&gt;

这是我尝试过的 https://jsfiddle.net/sonymax46/wdaLomnf/3/

【问题讨论】：

标签： html css css-shapes

【解决方案1】：

这是一个包含一个元素的想法。只需调整渐变，直到你得到你想要的。

.curve {
  width:100px;
  height:50px;
  border-top:2px solid;
  background:
    radial-gradient(100% 57% at left,transparent calc(100% - 2px),#000,transparent 100%)
    left/15px 100% no-repeat;
}

&lt;div class="curve"&gt;&lt;/div&gt;

另一个想法：

.curve {
  width:100px;
  height:50px;
  border-top:2px solid;
  position:relative;
  overflow:hidden;
}
.curve:before {
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  border-radius:50%;
  top:calc(50% - 40px);
  right:calc(100% - 12px);
  border:2px solid;
  box-sizing:border-box;
}

&lt;div class="curve"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

也许会改变

border-color: transparent transparent #4C5D65 transparent;到

border-color: #4C5D65 transparent #4C5D65 transparent;

或者在上面添加一个元素，让两者的边距都为零，然后让下边框颜色一样。

【讨论】：

【解决方案3】：

希望对您有所帮助。

.Curve {
  top: 25px;
  left: 25px;
  width: 50px;
  border: solid 1px #4C5D65;
  height: 86px;
  content: " ";
  padding: 0px;
  position: absolute;
  transform: rotate(271deg);
  border-color: transparent transparent #4C5D65 transparent;
  border-radius: 0 0 51px 99%/44px;
}

span.Curve:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  border-right: 1px solid #21262D;
  top: 92%;
  left: -6px;
  /* background: rebeccapurple; */
}

&lt;span class="Curve"&gt;&lt;/span&gt;

【讨论】：

请注意content 属性对.Curve 没有任何作用。它必须应用于伪元素选择器。