在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中稍微彎曲的邊框

回答

相關問題