使用 CSS 自定义圆形图像

Question

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

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

DEMO

有没有想过这是否可能？

Answer 1

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

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

好的...给你。根据需要调整。

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

有一种方法可以 "fake" 这个形状 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 4

您确实可以获得没有直边的精确形状： 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 5

选项 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 6

替代方法 inline svg. The following example uses 2 cubic bezier curves to make the desired shape and the pattern element 用图像填充形状：

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

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

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 可以做到：

下面的演示，两张图片并排放置：

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

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

使用 CSS 自定义圆形图像

Custom rounded shape image using CSS

html

css

css-shapes