How to create something like this?

What should look like

    2 answers 2

    .wrap { width: 300px; height: 200px; position: relative; background-image: url(http://lorempixel.com/400/300/); } .content_svg_arc { width: 180px; height: 195px; top: 8px; position: absolute; } .content_text { border-radius: 55px 0 0 20px; width: 160px; height: 60px; top: 30px; position: absolute; left: 45px; font: bold 15px/1em 'Arial Black', sans-serif; white-space: nowrap; text-shadow: -1px -2px 0px white, 1px -2px 0px white, 1px 2px 0px white, -1px 2px 0px white; } .color { color: #00c7c7; } .big { font: bold 5em sans-serif; } .text_second_line { font: bold 1em/1em sans-serif; padding-left: 0.5em; text-transform: uppercase; } 
     <div class="wrap"> <svg class="content_svg_arc"> <path d="M160 29 A 90 90 55 1 0 180 130" stroke-width="7" stroke="#ffffff" fill="none"/> <path d="M160 29 A 90 90 55 1 0 180 130" stroke-width="3" stroke="#00c7c7" fill="none"/> </svg> <div class="content_text"> <div> <span>более</span> <span class="color big">10</span> <span class="color">лет</span> </div> <span class="text_second_line"> успешной работы </span> </div> </div>

      Example

       * { box-sizing: border-box; padding: 0; margin: 0; } .circle { position: relative; margin: 15px auto; width: 150px; height: 150px; border: 2px solid #00f; border-radius: 50%; } .circle__text{ padding: 10px; background: #fff; position: absolute; top: 15px; right: -50px; text-align: center; width: 150px; } 
       <div class="circle"> <div class="circle__text"> Сделать круг без четверти с контентом внутри </div> </div>