使用css绘制曲线
使用css绘制曲线
提问于 2013-12-27 23:45:56
我想用css创建一个模拟波浪运动的动画。
为此，我需要将直线或div更改为曲线。
我熟悉的CSS规则，让整个div变成半圆形或者改变元素的边框。
例如：border-radius、perspective或border-top-radius...
这张图片展示了我想要的东西：
你有这方面的经验吗？或者这是可能的？
先谢谢你...
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-01-09 05:15:18
您可以使用CSS使用非对称边框来制作曲线。
border-radius: 50%/100px 100px 0 0;
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}<div class="box"></div>
Stack Overflow用户
发布于 2017-05-10 20:04:21
@Navaneeth和@Antfish，不需要变换，你也可以这样做，因为在上面的解决方案中，只有上边界是可见的，所以对于内曲线，你可以使用下边界。
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent transparent #000 transparent;
border-radius: 0 0 240px 50%/60px;
}<div class="box"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20803489
复制相关文章
相似问题
腾讯云开发者
