本文主要是介绍CSS绘制圆弧，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
css绘制如图的圆弧：
这种矩形+弧形的效果中，弧形的效果一般是由一条曲线拉伸出来的，这条曲线往往是属于一个椭圆的，所以可以绘制一个椭圆，截取部分可视区域实现效果。
<style>
.wrapper{width: 400px;height: 600px;border: 2px solid saddlebrown;position: relative;overflow: hidden;
}.arc-continer{width: 100%;/* 高度设置为 圆弧形状整体高度 */height: 259px;background-color: transparent;position: relative;
}/* 绘制椭圆 :长半轴为容器宽度*2左右,短半轴为容器宽度*1 左右 -- 可以根据需要进行微调*/
.arc-continer::after{content: '';width: 200%;height:400px;background-color: aqua;position: absolute;/* 绘制为椭圆 */border-radius: 100% /100%;/* top 为 椭圆高度 - arc-continer高度*/top: -141px;left: 50%;transform: translateX(-50%);
}</style>
</head><body><div class="wrapper" id="wrap"><div class="arc-continer" id="continer"></div></div>
</body>
这篇关于CSS绘制圆弧的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
