CSS3 для кривой символа

Question

Я ищу код css для формы ниже, я пытался использовать радиус границы, но мне пришлось работать с разными div для верхней границы и левой кривой. Я ищу css который др aws завершить форму ниже. Любая помощь?

.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

Надеюсь, это поможет вам.

.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 2

Вот идея с одним элементом. Просто настройте градиент, пока не получите желаемое.

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

Answer 3

Возможно изменить

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

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

или добавить элемент выше, сделать поля обоих равными нулю, а затем сделать нижнюю границы того же цвета.