Làm thế nào để tạo một hình chữ nhật tròn hình chữ Css?

Question

Tôi đang cố gắng để thiết kế một hình ảnh hồ sơ cá nhân chỉ như thế này

nhưng mã của tôi cho tôi thiết kế sau

Tôi lo lắng về không gian màu trắng bên trong đường viền và hình dạng ở đây là mã số

.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

Điều này cho kết quả tương tự như những gì bạn muốn. Hãy thử tinh chỉnh các giá trị của bán kính đường viền và chiều rộng chiều rộng để đạt được chính xác những gì bạn muốn.

<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> 

Dưới đây là một liên kết hữu ích: https://css-tricks.com/examples/ShapesOfCSS/

Answer 2

Làm thế nào về việc sử dụng SVG.

Trình duyệt này có hỗ trợ trình duyệt tốt hơn CSS clippath và hình dạng và thực tế không có giới hạn.

Với this online editor Tôi đã thực hiện việc này.

Một lựa chọn tốt hơn có khả năng sẽ được tải về và sử dụng 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

đường SVG và mẫu

Bạn có thể tạo hình dạng của bạn với một con đường duy nhất. Tôi đã sử dụng đường cong Bezier bậc hai.
Path MDN

Tôi đã thêm hình ảnh vào svg bằng thẻ hình ảnh và thẻ mẫu.
Điều này sau đó sử dụng bên trong đường dẫn với số fill="url(#img1)" này.
Thẻ defs được sử dụng để ẩn các phần tử mà chúng tôi không sử dụng trực tiếp.

<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>