This question has already been answered:

How to create a block with an arc (inside the block) (spent 5 hours on solving the problem and did not find the answer).

I use WordPress/css .

Example

enter image description here

Reported as a duplicate by participants 0xdb , Air , Sasha Chernykh , Saidolim , Vadizar 6 Apr '18 at 15:56 .

A similar question was asked earlier and an answer has already been received. If the answers provided are not exhaustive, please ask a new question .

    3 answers 3

    As one of the options:

     div { margin: 50px; width: 100px; height: 50px; border: 2px solid red; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-bottom: 0; transform: rotate(30deg); } 
     <div></div>

    • humster_spb, thank you for the answer, as a very good option and in solving my problem it will come in handy as a small part. - Serge He is
    • you can throw off info about this solution: border-radius: 50% 50% 0 0 / 100% 100% 0 0; ? I have not seen this yet) - Vitaly Cherny
    • @ Acne Black, here, for example: shpargalkablog.ru/2017/08/semicircle.html - humster_spb
    • @ Acne Black, more about border radius and all sorts of figures there is: habrahabr.ru/post/141658 - humster_spb
    • one
      @ Serega On, please, if someone’s answer helped you - mark it with a decision, these are the rules of SO :) - Arthur

    This can be done on SVG :

     <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" width="230" height="150" viewBox="0 50 230 150" style="border: 1px solid crimson"> <path style="fill:none;stroke:crimson;stroke-width:3;" d="M 50,131 C 91,86 161,108 165,163"/> <polygon points="47 125, 57 135, 47 135" fill="crimson"/> </svg>

      The very first thing you need is a block that will block the image, for this we use the crawler from css3 border-radius: 16em / 1em; we watch snippet

       img { display: block; max-width: 100%; max-height: 100%; } .img { width: 640px; margin: 50px auto; position: relative; } .img:after { content: ""; display: block; width: 100%; height: 50px; background: #fff; border-radius: 16em/1em; position: absolute; bottom: -25px; } .img:before { content: ""; display: block; width: 100%; height: 50px; background: #fff; border-radius: 16em/1em; position: absolute; top: -25px; } .bullet { margin: 50px; width: 100px; height: 50px; border: 2px solid red; border-radius: 50% 50% 0 0 / 100% 100% 0 0; border-bottom: 0; transform: rotate(30deg); position: absolute; top: 30px; left: 50%; } .bullet:before { content: ""; border-left: 10px solid transparent; border-right: 10px solid red; border-top: 10px solid transparent; border-bottom: 10px solid transparent; position: absolute; left: -12px; top: 50px; transform: rotate(-80deg); } 
       <div class="img"> <img src="https://get.wallhere.com/photo/women-model-sitting-black-hair-fashion-hair-Person-swimwear-clothing-supermodel-girl-beauty-woman-lady-leg-1920x1200-px-human-positions-photo-shoot-art-model-abdomen-human-body-thigh-undergarment-590671.jpg" alt=""> <div class="bullet"></div> </div>

      and as you can see I inserted the image into the block which is the parent for the pseudo elements, here with the pseudo elements I set the rounding

      • one
        The author of the question wanted to know how to make an arc (red arrow), as it seems to me, although I also doubted whether I did (the question is ugly formulated) - Arthur
      • I wanted to do it on svg, but I thought what else I need to explain later ... and did css - user33274
      • Well, I wouldn’t say :) It’s enough to explain how to make a path , namely via Inkscape, and a triangle via a polygon, and then there are already xy coordinates of 3 points (in my case of course) - Arthur
      • if off topic I answered I can delete ... - user33274
      • After all, you can add, make an arc on what you have and will have a full answer)) - Arthur