html - 曲线符号的 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/

标签： htmlcsscss-shapes

Answer 1

也许改变

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

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

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