使用CSS样式划一个半圆

微wx笑 2022-03-18【前端开发】125 4 0关键字：

html<div class="div_circle"样式：.div_circle { width:400px; height:100px; border:1px solid color:#f5f8fa}.div_circle:before { content: ''; positi

h80无知

htmlh80无知

1	`<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
;
}