使用CSS样式划一个半圆

h80无知

htmlh80无知

<div class="div_circle"

h80无知

样式：h80无知

.div_circle {
  width:400px;
  height:100px;
  border:1px solid color:#f5f8fa
}
.div_circle:before {
    content: '';
    position: absolute;
    width: 
36px
;
    height: 
12px
;
    border: 
1px
 solid #2e6da4;
    border-radius: 0 0 50% 50%/0 0 100% 100%;
    border-top: 
1px
 solid #f5f8fa;
    top: 
-5px
;
    background: #fff;
    left: 
11px
;
}

效果：h80无知

h80无知

本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/front/2022-03-18/1098.html

很赞哦！ () 赏 有话说 ()