Jak utworzyć kształt zaokrąglonego prostokąta Css?

Question

Staram się zaprojektować kształt profilu zdjęcie tak jak to

ale mój kod dał mi następującą konstrukcję

Martwię się o białej przestrzeni wewnątrz tutaj granica i kształt to kod

.doctor-profile-photo { 
 
    width: 210px; 
 
    height: 210px; 
 
    border-radius: 60px/140px; 
 
    border: 5px solid #000; 
 
    box-shadow: 0px 2px 5px #ccc; 
 
} 
 
.doctor-profile-photo img { 
 
    width: 100%; 
 
    height: 100%; 
 
    border-radius: 60px/140px; 
 
}

<div class="doctor-profile-photo"> 
 
    <img src="http://weknowyourdreams.com/images/bird/bird-09.jpg" alt=""> 
 
</div>

Answer 1

Daje to całkiem podobne wyjście do tego, co chcesz. Spróbuj poprawić wartości szerokości i promienia krawędzi, aby osiągnąć dokładnie to, co chcesz.

<style> 
#pic { 
    position: relative;  
    width: 130px; 
    height: 150px; 
    margin: 20px 0; 
    background: red; 
    border-radius: 50%/10%; 
    color: white; 
    text-align: center; 
    text-indent: .1em; 
} 
#pic:before { 
    content: ''; 
    position: absolute; 
    top: 10%; 
    bottom: 10%; 
    right: -5%; 
    left: -5%; 
    background: inherit; 
    border-radius: 5%/50%; 
} 
</style> 
<div id="pic"></div> 

Oto przydatny Link: https://css-tricks.com/examples/ShapesOfCSS/

Answer 2

Jak na temat korzystania SVG.

Ma lepszą obsługę przeglądarki niż ścieżki i kształty CSS i praktycznie bez ograniczeń.

Z this online editor zrobiłem to.

Lepszym wyborem będzie prawdopodobnie pobrać i używać Inkscape

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg"> 
 
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --> 
 
<g> 
 
    <title>background</title> 
 
    <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/> 
 
    <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"> 
 
    <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/> 
 
    </g> 
 
</g> 
 
<g> 
 
    <title>Layer 1</title> 
 
    <path id="svg_1" d="m405,141.5" stroke-linecap="undefined" stroke-linejoin="undefined" stroke-width="1.5" stroke="#000" fill="#fff"/> 
 
    <path stroke="#000" id="svg_4" d="m187,196.373093c0,-94.208557 25.572662,-122.873093 96.182434,-122.873093c70.609772,0 98.817566,26.156921 98.817566,120.365479c0,94.208557 -25.572662,126.634521 -96.182434,126.634521c-70.609772,0 -98.817566,-29.918365 -98.817566,-124.126907z" stroke-opacity="null" stroke-linecap="null" stroke-linejoin="null" stroke-width="1.5" fill="#A0D58A"/> 
 
    <path id="svg_5" d="m282,118.5" opacity="0.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="#fff"/> 
 
    <path stroke="#000" id="svg_6" d="m313.546783,174.133652c0,0 4.896179,-23.9991 0,-32.117096c-4.912354,-8.137268 -6.869751,-13.56337 -17.645752,-17.424896s-6.846954,-3.109192 -14.701385,-2.71283c-7.835388,0.396835 -14.369629,5.405899 -14.369629,8.117599c0,0 -4.894775,0.397766 -6.866394,2.712967c-1.955597,2.338333 -5.214035,13.169388 -5.214035,15.882446s1.620468,20.909836 3.258438,24.770721l-1.938263,0.771088c-1.636551,22.455444 6.534241,25.168488 6.534241,25.168488c2.924896,20.911621 5.86554,12.020676 5.86554,17.425583s-2.940643,3.486038 -2.940643,3.486038s-2.607086,8.513412 -9.139801,11.622177c-6.534241,3.089218 -42.791901,19.721832 -45.732544,23.206909c-2.957336,3.50531 -2.623703,19.76239 -2.623703,19.76239l155.48732,0c0,0 0.352692,-16.25708 -2.603699,-19.76239c-2.959717,-3.485077 -39.214996,-20.117691 -45.749237,-23.206909c-6.532806,-3.108765 -9.139832,-11.622177 -9.139832,-11.622177s-2.940643,1.940079 -2.940643,-3.486038s2.940643,3.486038 5.881317,-17.425583c0,0 8.172302,-2.713043 6.534241,-25.168488l-1.955536,0z" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" fill="#fff"/> 
 
</g> 
 
</svg>

Answer 3

ścieżkę SVG i wzór

Możesz stworzyć swój kształt z jednej ścieżce. Użyłem krzywej krzywej Beziera.
Path MDN

Dodałem obrazek do svg przy użyciu znacznika graficznego i znacznika wzoru.
To jest następnie za pomocą wewnątrz ścieżki z tym fill="url(#img1)".
Znacznik defs służy do ukrywania elementów, których bezpośrednio nie używamy.

<svg viewBox="0 0 100 100" width="400px" xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="400"> 
 
     <image xlink:href="http://lorempixel.com/400/400/" x="0" y="0" width="100px" height="100px" /> 
 
    </pattern> 
 

 
    </defs> 
 
    <path d="M15,15 Q 50,0 85,18 100,50 85,85 50,100 18,85 0,50 15,15Z" fill="url(#img1)" /> 
 
</svg>