我想用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>
原文地址:https://www.jb51.cc/html/225328.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。