MatzunaTata MatzunaTata - 3 months ago 32
CSS Question

CSS one side cut circle image with border

How I can make following shape with a colored border:

round image with shaped edge

My first try was pure CSS but the attached code makes more an egg shape than a circle:



img {
border: 2px #ff00ff solid;
border-top-left-radius: 60% 50%;
border-bottom-left-radius: 60% 50%;
border-top-right-radius: 50% 20%;
border-bottom-right-radius:50% 20%;
}

<img src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/4e34feee0acdc38a?w=400&h=400" style="width:100%">





Second try, working with SVG isn't supported in Opera and IE and I have no idea how to make borders. The "cut" doesn't work every time.



img {
clip-path: url(#myClip);
}

<svg width="120" height="120"
viewBox="0 0 120 120"
xmlns="http://www.w3.org/2000/svg">

<defs>
<clipPath id="myClip">
<circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/>

</clipPath>
</defs>
</svg>
<img src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" style="width:100%">




Answer

The simplest solution is probably just to make an SVG.

<svg width="400px" height="400px" viewBox="0 0 1 1"
     overflow="visible">
  <defs>
    <mask id="myMask" x="0" y="0" width="1" height="1"
          maskContentUnits="objectBoundingBox" fill="white">
      <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/>
    </mask>
  </defs>
  <image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg"
         x="0" y="0" width="1" height="1" mask="url(#myMask)"/>
  <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/>
</svg>

Comments