CSS3 for Curve Symbol

Question

Im looking for css code for below shape, i have tried using border radius but have to work with different div's for top border and left curve. Im looking for css which draws complete shape below. Any help ?

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

Here is what i have tried https://jsfiddle.net/sonymax46/wdaLomnf/3/

Answer 1

Here is an idea with one element. Simply adjust the gradient until you get what you want.

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

Another idea:

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