使用css3怎么绘制一个半圆弧线-创新互联

使用css3怎么绘制一个半圆弧线?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联是一家专业提供博州企业网站建设,专注与成都网站建设、做网站成都h5网站建设、小程序制作等业务。10年已为博州众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。

css代码


.circle1 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 100% 0 0 100%/50%;
    border-right: none;
}
.circle2 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 50% 50% 0 0/100% 100% 0 0;
    border-bottom: none;
}
.circle3 {
    width: 100px;
    height: 200px;
    border: 1px solid black;
    border-radius: 0 100% 100% 0/50%;
    border-left: none;
}
.circle4 {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    border-radius: 0 0 50% 50%/0 0 100% 100% ;
    border-top: none;
}

html代码

        
    
  •     
  •     
  • 效果如下:

    使用css3怎么绘制一个半圆弧线

    关于使用css3怎么绘制一个半圆弧线问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


    新闻名称:使用css3怎么绘制一个半圆弧线-创新互联
    网页路径:http://pwwzsj.com/article/doghcp.html

    其他资讯