在CSS中稍微弯曲的边框

-1

我正试图在CSS中创建一个边框，以便我的图像在右侧获得此弯曲边。

我试过只是使用border-radius: 0 0 50% 0，但在样本图像中看起来不太像。在CSS中稍微弯曲的边框

任何想法？

来源

2017-12-27 Marco

尝试px中的第三个值，即border-radius：0 0 30px 0; – Pirate

你可以在JSFiddle中显示吗？ –

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

来源

2018-01-25 13:16:21 Marco

尝试给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>

来源

2017-12-27 11:18:44 Pirate

感谢您的回答！这多少有点像我的解决方案。问题是曲线非常单调。示例图像中的边框非常轻微地指出顶部角落，并且在底端得到更多弯曲 – Marco

示例图像中的边框由2个矢量构成，也许有一种方法可以在css边框中使用矢量吗？ – Marco

我看不到图像。路径被阻止。 – Pirate

，从而获得所需的结果，你可以使用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>

来源

2017-12-27 12:39:54 Snip3r

在CSS中稍微弯曲的边框

回答

相关问题