CSS3 曲线符号

Question

我正在寻找以下形状的 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;
 }

<span class="Curve"> </span>

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

Answer 1

也许会改变

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

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

或者在上面添加一个元素，使两者的边距都为零，然后使底部边框颜色相同。

Answer 2

希望对您有所帮助。

.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; */
}

<span class="Curve"></span>

Answer 3

这是一个只有一个元素的想法。简单地调整渐变，直到你得到你想要的。

.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;
}

<div class="curve"></div>

另一个想法：

.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;
}

<div class="curve"></div>

CSS3 曲线符号

CSS3 for Curve Symbol

html

css

css-shapes