CSS中略有弯曲的边框

Question

我试图在css中创建一个边框，这样我的图像就会在右边弯曲一边。



我尝试使用border-radius: 0 0 50% 0，但在示例图片中看起来并不像。

有什么想法吗？

Answer 1

尝试在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/stackoverflow/img/sprites.svg?v=1b3cdae197be');
}

<div id="my">
</div>

Answer 2

要获得所需的结果，您可以使用svg clipPath 例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

经过一番研究后，我发现了一种称为掩蔽和削波的解决方案。 我将简单地为曲线创建一个alpha蒙版并将其应用于图像。