CSSで少し湾曲したボーダー

-1

私は画像がこの曲線の右側を取得するようにCSSで枠線を作成しようとしています。

私はちょうどborder-radius: 0 0 50% 0を使ってみましたが、サンプル画像のようには見えませんでした。CSSで少し湾曲したボーダー

アイデア？

出典

2017-12-27 Marco

pxの3番目の値、つまりborder-radiusを試してください：0 0 30px 0; – Pirate

JSFiddleで表示できますか？ –

いくつかの研究の後、私はマスキングとクリッピングと呼ばれる解決策を見つけました。私は単にカーブのアルファマスクを作成し、それを画像に適用します。

出典

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のクリップ経路を使用することができ、望ましい結果を得るために。
例：

<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で少し湾曲したボーダー

答えて

関連する問題