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>
Maybe change
border-color: transparent transparent #4C5D65 transparent; to
border-color: #4C5D65 transparent #4C5D65 transparent;
or add an element above, make the margins of both equal to zero, and then make the bottom border the same colour.
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/
