Question

我想获得如下所示的自定义形状图像：

＆＃13;

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

＆＃13;

<img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg">

＆＃13;

DEMO

如果有可能，还有什么想法吗？

Answer 1

有一种方法可以用border“伪造”这个形状：

body {
  background: purple;
}
#oval-shape {
  display:block;
  margin: 20px auto;
  width: 200px;
  height: 200px;
  background: none;
  border-radius: 100%;
  box-sizing: border-box;
  border-bottom: 50px solid transparent;
}

<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape">

Answer 2

使用以下边框属性并根据需要进行调整。更多数字意味着更多朝向圈子。希望它有所帮助

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  border-top-left-radius:150px;
  border-top-right-radius:150px;
  border-bottom-left-radius:80px;
  border-bottom-right-radius:80px;
}

Answer 3

您确实可以获得没有直边的确切形状： http://jsfiddle.net/XDLVx/339/

#oval-shape {
    width: 200px;
    height: 100px;
    border-radius: 100px / 70px 70px 30px 30px;
}

更多信息：http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Answer 4

带有inline svg的

替代方法。以下示例使用2 cubic bezier curves制作所需的形状，使用pattern element填充图像的形状：

＆＃13;

svg{width:30%;height:auto;}

＆＃13;

<svg viewbox="0 0 10 8">
  <defs>
    <pattern id="img" patternUnits="userSpaceOnUse" width="20" height="10">
      <image xlink:href="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" x="-1" y="0" width="14" height="7" />
    </pattern>
  </defs>
  <path fill="url(#img)" d="M0.7 5 C1 -0.8 9 -0.8 9.3 5 C9.3 7.5 0.7 7.5 0.7 5"/>
</svg>

＆＃13;

Answer 5

当然......你走了。根据需要进行调整。

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  border-top-left-radius: 150px;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 150px;
  border-bottom-right-radius: 50px;
}

<img src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg" id="oval-shape">

Answer 6

选项1

#ovalshape{
    -webkit-clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%);
    clip-path: polygon(51% 27%, 71% 36%, 91% 53%, 89% 68%, 76% 78%, 49% 85%, 16% 78%, 8% 65%, 15% 46%, 33% 33%);
}

选项2：拍摄你想要的图像并切出内部并使其透明。

 <div style="height: 100; width: 100; overflow: hidden; background-image: url'picture.jpg';>
     <img src="cutout.png" style="height: 100%; width: 100%;">
 </div>

Answer 7

#oval-shape {
  width: 200px;
  height: 100px;
  background: blue;
  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

<img id="oval-shape" src="http://d152j5tfobgaot.cloudfront.net/wp-content/uploads/2014/04/internship_yourstory.jpg">

Answer 8

#oval-shape {
    width: 18%;
    height: 209px; 
    background: blue; 
    -moz-border-radius: 100px / 50px; 
    -webkit-border-radius: 50%/* border-radius: 100px / 50px; */
    border-radius: 50%;

}

根据你的形状尝试不同的高度和宽度。我认为这将有效

Answer 9

正如其他人的回答，border-radius可以做到：

下面的

演示，两个图像在彼此之上并排并列：

＆＃13;

img {
  border-radius:200px 200px 180px 180px / 190px 190px  80px 80px;
  vertical-align:middle;
}
div img {
  opacity:0.5
}
div {
  background:url(http://i.stack.imgur.com/C8nGL.png);
  display:inline-block;
  padding:12px;
}
.dem {
  margin:15px;
  box-shadow:0 0 0 10px white;
  }
body {
  background:#333;
  }

＆＃13;

<div>
  <img src="http://lorempixel.com/140/100/people/9" />
</div>
<img src="http://lorempixel.com/140/100/people/9" class="dem"/>
<img src="http://i.stack.imgur.com/C8nGL.png" />

＆＃13;

使用CSS自定义圆形图像

9 个答案: