如何创建一个圆角的矩形Css？

Question

我正在尝试像这样设计轮廓图像形状

但是我的代码给了我以下设计

我担心边框内的空白，这里的形状是代码

 .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

这将提供与您想要的输出非常相似的输出。 尝试调整border-radius和height-width的值以实现所需的效果。

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

这是一个有用的链接： https : //css-tricks.com/examples/ShapesOfCSS/

Answer 2

SVg路径和模式

您可以使用一条路径创建形状。 我使用了二次贝塞尔曲线。
路径MDN

我使用图像标签和图案标签将图像添加到svg中。
然后，在路径内部使用此fill="url(#img1)" 。
defs标签用于隐藏我们不直接使用的元素。

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