Actually need such an element:

enter image description here

Tried to do so, but failed, the line of the semicircle does not reach the right moment:

.complex { padding: 100px 0; } .line-box { border-bottom: 2px solid #3962b5; position: relative; } .ico-complex-box { width: 130px; height: 130px; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; background-color: #fff; } .ico-complex-box:before { content: ""; width: 130px; height: 130px; border-radius: 50%; border: 2px solid #3962b5; position: absolute; border-bottom: 2px solid transparent; border-right: 2px solid transparent; border-left: 2px solid transparent; transform: rotate(46deg); } .ico-complex-box:after { content: ""; width: 130px; height: 133px; border-radius: 50%; border: 1px solid #3962b5; position: absolute; border-top: 2px solid transparent; border-right: 2px solid transparent; border-left: 2px solid transparent; transform: rotate(145deg); } 
 <section class="complex"> <div class="top-line-box"> <div class="line-box"> <div class="ico-complex-box"> </div> </div> </div> </section>

    2 answers 2

    I would do this using the clip property. Although, there are enough other tools, such as SVG or canvas

     .complex { padding: 100px 0; } .line-box { border-bottom: 2px solid #3962b5; position: relative; } .ico-complex-box { width: 130px; height: 130px; position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; background-color: #fff; } .ico-complex-box:before { content: ""; width: 130px; height: 130px; top: 0; right: 0; border-radius: 50%; border: 2px solid #3962b5; position: absolute; clip: rect(auto, auto, 65px, 65px); } .ico-complex-box:after { content: ""; width: 130px; height: 130px; border-radius: 50%; border: 1px solid #3962b5; position: absolute; top: 0; left: 0; clip: rect(auto, 65px, 65px, auto); } 
     <section class="complex"> <div class="top-line-box"> <div class="line-box"> <div class="ico-complex-box"> </div> </div> </div> </section>

      Here is the css:

       /* базовые стили */ *, *:before, *:after { box-sizing: border-box; } /* Общая фигура */ .line-box { position: relative; width: 130px; height: 65px; margin: 0px auto; } /* левая\правая линии фигуры */ .line-box:before, .line-box:after { content: ''; position: absolute; height: 2px; background: #3962b5; bottom: 0%; } /* левая линии фигуры */ .line-box:before { left: -9999px; right: 100%; } /* правая линии фигуры */ .line-box:after { right: -9999px; left: 100%; } /* обертка полукруга в центре фигуры */ .ico-complex-box { width: inherit; height: inherit; overflow: hidden; } /* полукруг в центре фигуры */ .ico-complex-box:before { content: ''; display: block; width: inherit; height: 130px; border: 1px solid #3962b5; border-bottom: none; border-radius: 50% 50% 0 0; } /* обертка Сектора полукруга в центре фигуры */ .ico-complex-box.box-2 { position: absolute; top: 0; width: 65px; right: 0; transform: rotate(90deg); } /* Сектор полукруга в центре фигуры */ .ico-complex-box.box-2:after { content: ''; display: block; width: 130px; height: 130px; border: 3px solid #3962b5; border-bottom: none; border-radius: 50% 50% 0 0; } .ico-complex-box.box-2:before { display: none; } .top-line-box{ overflow: hidden;} 
       <section class="complex"> <div class="top-line-box"> <div class="line-box"> <div class="ico-complex-box"> </div> <div class="ico-complex-box box-2"> </div> </div> </div> </section>