使用CSS创建自定义圆角形状图片

Question

使用CSS创建自定义圆角形状图片

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

演示

你认为这是否有可能？

- Elaine Byene

你是什么意思说“这真的可能吗”？难道你不是已经做到了吗？那个你提供的演示，有什么不能满足你的需求的地方吗？ - Paul L

不对，形状不正确。图像在顶部更弯曲。 - Elaine Byene

你的问题要求一个椭圆形。演示创建了一个椭圆形。问题中的图片不是一个椭圆形。我不知道那是什么形状，但它不是椭圆形。所以您想修改演示以创建问题中图像的形状？我建议您重新措辞您的问题以消除混淆。 - Paul L

你知道吗？你想展示的那张图片甚至使用了CSS来实现。 - Matt Runion

我不知道如何表达我的问题，使其听起来像我想要的那样。回答mrunion的问题，设计是在Photoshop中完成的。如果它是用CSS完成的，我会复制粘贴代码，而不会在这里问！ - Elaine Byene

您可以使用CSS遮罩来获取此自定义形状。您可以在此处阅读更多信息：http://www.html5rocks.com/en/tutorials/masking/adobe/ - Rise Ledger

9个回答

3

使用以下边框属性，并根据您的需求进行调整。数字越多表示越接近圆形。希望这能帮到您。

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

- sam

谢谢，但那远离我的要求。请再次检查屏幕截图。 - Elaine Byene

1

@ElaineByene 这为您提供了使用CSS制作自定义形状图像的正确方法。您需要自己尝试使用px /％属性值，以找到最接近您想要的形状。+1 - AndrewL64

不！我已经有了那个，并且在发布这里之前已经玩了几个小时。 - Elaine Byene

2

另一种方法是使用内联 SVG。以下示例使用2个三次贝塞尔曲线来创建所需的形状，并使用pattern元素将形状填充为图像：

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>

- web-tiki

非常棒的解决方案...看起来你对SVG非常了解。你能告诉我该从哪里开始学习吗？ - DaniP

@DaniP 我建议你从这里开始。如果你想聊一聊或者有问题，可以来这个聊天室，人们会尽力帮助你的。 - web-tiki

2

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

意思是：这个链接提供了有关CSS边框半径属性的更多信息。

- hakJav

0

当然，给你。根据需要进行调整。

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

- Paulie_D

不，这不是我要找的。而且，我一直在尝试根据所需/在此处显示的截图进行调整。这种调整让我发疯。 - Elaine Byene

0

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

- Dharmesh

1

这个回答有什么意义呢？难道它不和问题中的代码一样吗？ - Harry

0

就像其他人回答的那样，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" />

- G-Cyrillus

0

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

- Dillon Burnett

我不理解你的代码。src="cutout"是什么意思？clip-path又是什么？ - Elaine Byene

在你发布的那张图片上，选中人物并将其剪切出来，使其变为透明。然后将图像保存为cutout.png，并将其用作源文件。clip-path与第二个选项无关，它们是两个不同的选项。 - Dillon Burnett

剪切是不可能的，因为它将是一个JPG格式的动态图像。你能给一个那个clip-path的演示吗？我无法理解这段代码。 - Elaine Byene

0

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

}

根据您的形状尝试不同的高度和宽度。我认为这会起作用。

- Dharmesh

you should delete this answer - G-Cyrillus

@GCyrillus 你能给我提个建议吗？为什么我应该删除这个回答，以及最好的回答方式是什么？ - Dharmesh

你应该缩进你放在答案中的代码（以增加可读性），并简要解释一下它是关于什么的，这样答案就有些价值了。现在看来，你很幸运没有被任何人踩到:) 我只是编辑了你的答案中的代码部分，你可以轻松地注意到它是关于什么的，语法也有问题... 最后两行不会有任何用处;) - G-Cyrillus

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- DaniP · Accepted Answer

您可以使用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">