CSS3 曲线符号
CSS3 for Curve Symbol
我正在寻找以下形状的 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>
也许会改变
border-color: transparent transparent #4C5D65 transparent;
至
border-color: #4C5D65 transparent #4C5D65 transparent;
或者在上面添加一个元素,使两者的边距都为零,然后使底部边框颜色相同。
希望对您有所帮助。
.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>
这是一个只有一个元素的想法。简单地调整渐变,直到你得到你想要的。
.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>
我正在寻找以下形状的 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>
也许会改变
border-color: transparent transparent #4C5D65 transparent;
至
border-color: #4C5D65 transparent #4C5D65 transparent;
或者在上面添加一个元素,使两者的边距都为零,然后使底部边框颜色相同。
希望对您有所帮助。
.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>
这是一个只有一个元素的想法。简单地调整渐变,直到你得到你想要的。
.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>