在CSS中稍微弯曲的边框
问题描述:
我正试图在CSS中创建一个边框,以便我的图像在右侧获得此弯曲边。
我试过只是使用border-radius: 0 0 50% 0
,但在样本图像中看起来不太像。在CSS中稍微弯曲的边框
任何想法?
答
经过一番研究,我发现了一个叫掩蔽和裁剪解决方案。 我将简单地为我的曲线创建一个alpha蒙版并将其应用于图像。
答
尝试给px中的值。并将图像设置为div的背景图像。
#my{
border:solid 2px red;
width:200px;
height:200px;
border-radius:0 0 100px 0;
background-image:url('https://cdn.sstatic.net/Sites/*/img/sprites.svg?v=1b3cdae197be');
}
<div id="my">
</div>
答
,从而获得所需的结果,你可以使用SVG clipPath。
例子:
<svg width="191" height="233" viewBox="0 0 426.2 515.9">
<defs>
<clipPath id="path">
<path fill="#FFFFFF" d="M426.2,1c0,0-4.4,498.5-169.4,514.9H1V1H426.2z"/>
</clipPath>
</defs>
<image clip-path="url(#path)" height="100%" width="100%" xlink:href="https://i.pinimg.com/736x/72/51/88/725188868ce404e3a9ade284a2187128--newport-jazz-festival-winter-beach.jpg" />
</svg>
尝试px中的第三个值,即border-radius:0 0 30px 0; – Pirate
你可以在JSFiddle中显示吗? –