首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用css绘制曲线

使用css绘制曲线
EN

Stack Overflow用户
提问于 2013-12-27 23:45:56
回答 2查看 123.6K关注 0票数 38

我想用css创建一个模拟波浪运动的动画。

为此,我需要将直线或div更改为曲线。

我熟悉的CSS规则,让整个div变成半圆形或者改变元素的边框。

例如:border-radiusperspectiveborder-top-radius...

这张图片展示了我想要的东西:

你有这方面的经验吗?或者这是可能的?

先谢谢你...

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-09 05:15:18

您可以使用CSS使用非对称边框来制作曲线。

border-radius: 50%/100px 100px 0 0;

VIEW DEMO

代码语言:javascript
复制
.box {
  width: 500px; 
  height: 100px;  
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
}
代码语言:javascript
复制
<div class="box"></div>

票数 77
EN

Stack Overflow用户

发布于 2017-05-10 20:04:21

@Navaneeth和@Antfish,不需要变换,你也可以这样做,因为在上面的解决方案中,只有上边界是可见的,所以对于内曲线,你可以使用下边界。

代码语言:javascript
复制
.box {
  width: 500px;
  height: 100px;
  border: solid 5px #000;
  border-color: transparent transparent #000 transparent;
  border-radius: 0 0 240px 50%/60px;
}
代码语言:javascript
复制
<div class="box"></div>

票数 12
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/20803489

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档