I'm trying to design a profile image shape just like this
but my code given me the following design
I'm worried about the white space inside the border and the shape here is code
.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>
This gives pretty similar output to what you want. Try tweaking the values of border-radius and height-width to achieve exactly what you want.
<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>
Here's a useful link : https://css-tricks.com/examples/ShapesOfCSS/
You can create your shape with a single path. I used a quadratic Bezier curve.
Path MDN
I added an image to the svg using a image tag and pattern tag.
This is then using inside the path with this fill="url(#img1)"
.
The defs tag is used to hide elements we are not using directly.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.