CSS 中略微弯曲的边框

Question

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

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

有什么想法吗？

Answer 1

尝试以像素为单位给出值。并将图像设置为 div.

的背景图像

#my{
  border:solid 2px red;
  width:200px;
  height:200px;
  border-radius:0 0 100px 0;
  background-image:url('https://cdn.sstatic.net/Sites/Whosebug/img/sprites.svg?v=1b3cdae197be');
}

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

Answer 2

要获得想要的结果，您可以使用 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>

Answer 3

经过一番研究，我找到了一种称为屏蔽和裁剪的解决方案。我将简单地为我的曲线创建一个 alpha 蒙版并将其应用到图像上。

CSS 中略微弯曲的边框

Slightly Curved Border In CSS

css

border