如何使用CSS3属性制作上下左右方向的半圆形

2024-10-13 10:12:09

1、第一步,打开HBuilder编辑工具,新建静态页面half.html,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

3、第三步,在<style></style>内编写div的id为left样式,宽度为200px、高度为400px、圆角喊岭谎儿半径为200px 0 0 200px,背景色为红色,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

5、第五步,接着编辑右边的半圆形,设置宽度为200px,高度为400px,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形

6、第六步,最后设置半圆形方向为上和下的样式,这时宽度为400px,高度为200px,如下图所示:

如何使用CSS3属性制作上下左右方向的半圆形
猜你喜欢