我想用css创建如下图所示的曲线.
我正在尝试这样的事情：
.curve {
background-color: #8aa7ca;
height: 65px;
width: 160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
<div class="curve"> <p>This is a sample text.</p> </div>
请帮我
解决方法
SVG
正如哈利在评论中所建议的那样,SVG将是你最好的选择,因为如果不使用多个元素,伪元素或使用可能不支持的CSS3属性,CSS中的双曲线是不可行的.
SVG代表可伸缩矢量图形. Web浏览器将其视为图像,但您可以在SVG中添加文本和普通HTML元素.
<svg width="466" height="603" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,0 L100,0 C25,50 50,75 0,100z" fill="#8aa7ca" /> </svg>
CSS
当然,这仍然可以用CSS,但确实需要使用伪元素：before和：after.它对于曲线也不是最好的,因为它会在没有抗锯齿的情况下渲染它们
div {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
div:before {
content: '';
background-image: radial-gradient(circle at 100% 100%,rgba(204,0) 100px,blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
div:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
<div></div>
