CSS一侧边境切圆图像

我怎样才能让下面的形状用彩色边框：CSS一侧边境切圆图像

round image with shaped edge

我的第一次尝试是纯CSS，但附加代码使超过一个鸡蛋形状圈：

img { 
 
    border: 2px #ff00ff solid; 
 
    border-top-left-radius: 60% 50%; 
 
    border-bottom-left-radius: 60% 50%; 
 
    border-top-right-radius: 50% 20%; 
 
    border-bottom-right-radius:50% 20%; 
 
}

<img src="https://d1wn0q81ehzw6k.cloudfront.net/additional/thul/media/4e34feee0acdc38a?w=400&h=400" style="width:100%">

第二次尝试，在Opera和IE中不支持使用SVG，我不知道如何制作边框。 “剪切”每次都不起作用。

img { 
 
    clip-path: url(#myClip); 
 
}

<svg width="120" height="120" 
 
    viewBox="0 0 120 120" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 

 
    <defs> 
 
     <clipPath id="myClip"> 
 
      <circle cx="260" cy="256" r="256" style="fill:none;stroke:#00df0b;stroke-width:6"/> 
 

 
     </clipPath> 
 
    </defs> 
 
</svg> 
 
<img src="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" style="width:100%">

来源

2016-08-19 MatzunaTata

[CSS的形状（https：//开头CSS- tricks.com/examples/ShapesOfCSS/）显示了一些可以用纯CSS制作的令人惊叹的形状，例如[facebook图标]（https://css-tricks.com/examples/ShapesOfCSS/#facebook-icon）（和upvoted @ jbutler483回答使用此技术） –

可能的重复[如何使用CSS绘制不完整的圆并在其中如何把图片？]（http://stackoverflow.com/questions/28673567/how-do-i-draw-an-incomplete-circle-with-css-and-in-it-how-to -put-a-picture） –

什么最简单的方案可能只是做出一个SVG。

<svg width="400px" height="400px" viewBox="0 0 1 1" 
 
    overflow="visible"> 
 
    <defs> 
 
    <mask id="myMask" x="0" y="0" width="1" height="1" 
 
      maskContentUnits="objectBoundingBox" fill="white"> 
 
     <path id="myPath" d="M 0.8 0.9 L 0.8 0.1 A 0.5 0.5 0 1 0 0.8 0.9 Z"/> 
 
    </mask> 
 
    </defs> 
 
    <image xlink:href="https://d1ra4hr810e003.cloudfront.net/media/27FB7F0C-9885-42A6-9E0C19C35242B5AC/0/D968A2D0-35B8-41C6-A94A0C5C5FCA0725/F0E9E3EC-8F99-4ED8-A40DADEAF7A011A5/dbe669e9-40be-51c9-a9a0-001b0e022be7/thul-IMG_2100.jpg" 
 
     x="0" y="0" width="1" height="1" mask="url(#myMask)"/> 
 
    <use xlink:href="#myPath" fill="none" stroke="#f0f" stroke-width="0.01"/> 
 
</svg>

来源

2016-08-19 19:28:35

太好了！但... 不支持与Opera和IE不幸。明天当我尝试你的建议时，我会给出进一步的反馈:) 更新：它的作品非常完美，非常感谢！ – MatzunaTata

@MatzunaTata Opera和IE都支持这个功能，除非您需要支持真正老旧，过时和危险的IE版本。 –

-1

检查这一项，现在也许这就是你想要的。 jsfiddle 例2：jsfiddle 你可以用宽度和高度移动到存档正是你想要

div { 
    width: 33%!important; 
    height: 75vh!important; 
    border: 2px #ff00ff solid; 
    border-top-left-radius: 50% 50%; 
    border-bottom-left-radius: 50% 50%; 
    border-top-right-radius: 40% 20%; 
    border-bottom-right-radius:40% 20%; 
    overflow:hidden; 
}

来源

2016-08-19 15:10:07

投票的人可以解释我为什么吗？ –

这是你可以用CSS获得的最好的。 –

是的，但这显然比他对CSS的尝试要好。无论如何，他可以用svg创建，但需要很多时间才能得到他想要的结果 –

你可以使用伪元素来创建这样的事情：

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    position: relative; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    transition: all 0.4s; 
 
} 
 
div:hover { 
 
    height: 500px; 
 
    width: 500px; 
 
} 
 
div:before { 
 
    content: ""; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 15%; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/300/300); 
 
    background-size: 100% 100%; 
 
    border-radius: 50%; 
 
    border: 10px solid tomato; 
 
} 
 
div:after { 
 
    content: ""; 
 
    position: absolute; 
 
    right: 0; 
 
    top: 15%; 
 
    height: 70%; 
 
    background: tomato; 
 
    width: 10px; 
 
}

<div></div>

来源

2016-08-19 22:58:35 jbutler483

CSS一侧边境切圆图像

回答

相关问题