CSSオーバーラップカラーで不規則な枠を作成する

Question

スクリーンショットのような不規則な枠線を可変色で作成するにはどうしますか？

Iは、グラフィックエディタで境界画像を作成し、docsに記載されているようにborder-imageプロパティを使用して検討しました。

しかし、このテクニックでは、境界 "波"に入る複数の背景色（スクリーンショットではグレーとホワイト）の効果を達成できませんでした。

もう1つの解決策は、Photoshopで背景全体の白とグレーを作成し、ウェブサイトでそれを使用することです。私は実際にはパフォーマンス上の理由からこれを避けたいと思っていましたが、灰色のチェックパターン部分を生成してそれを繰り返す方が好きでした。

さらに、スクリーンショットで見られるように、暗い部分はカルーセルからの画像です。画像はすべて異なる色で表示されるため、カルーセルコンテナにボーダー画像を適用することも解決策ではありません。

私はいくつかのアドバイスをいただければ幸いです。ありがとう。

Answer 1

使用SVGは：

あなたはSVGを使ってこれを行うことができます。このアプローチでは、反復円、パターンを塗りつぶして透明カットを生成するマスクにパターンを使用するため、かなり複雑です。このマスクは画像に適用され、完全な効果が得られます。これは私の意見では、あなたが望むものに最も近いものであり、また、良いブラウザサポートを持っています。 IE10 +、Edge、Firefox、Chrome、Opera、Safariで正常に動作します。

SVG imageであなたのカルーセルの作業をどうにかしなければならないでしょう。そうしないとマスクは効果がありません。（2）円の半径はコンテナの幅として変化します変更すると、JSを使用してviewBox属性の固定サイズのコンテナ（または）をコンテナの幅に割り当てる必要があります（または、半径の変更が発生しないようにするためにいくつかの設定を見つけます。 CSSを使用した

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 100px; 
 
} 
 
.masked svg { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 
path { 
 
    fill: #fff; 
 
} 
 
image { 
 
    mask: url("#mask"); 
 
}

<div class='masked'> 
 
    <svg viewBox='0 0 1200 100' preserveAspectRatio='none'> 
 
    <defs> 
 
     <pattern id="circles" patternUnits="userSpaceOnUse" width="10" height="100"> 
 
     <path d="M0,0 L10,0 10,95 A5,5 0 0,0 0,95 L0,0" /> 
 
     </pattern> 
 
     <mask id="mask"> 
 
     <rect height="100%" width="100%" fill="url(#circles)" /> 
 
     </mask> 
 
    </defs> 
 
    <image xlink:href='http://lorempixel.com/1200/100/nature/1' x="0" y="0" height="100%" width="100%" /> 
 
    </svg> 
 
    Lorem Ipsum Dolor Sit Amet... 
 
</div>

：

これは、CSSのマスクを使用して行うことができますが、残念ながら、この機能のためのブラウザのサポートはひどいです。現在、は、WebKit搭載のブラウザでのみサポートされていますです。他のブラウザがサポートされる必要がない場合、これはすばらしいオプションです。必要なのは、以下のスニペットのようなマスクに対して放射状のグラデーション（X軸で繰り返す）を作成し、それに必要なサイズを与え、それに応じて配置するだけです。

.masked { 
 
    position: relative; 
 
    height: 175px; 
 
    width: 100%; 
 
    background: linear-gradient(60deg, #EEE 35%, white 35.5%), linear-gradient(300deg, #EEE 35%, white 35.5%); 
 
    background-size: 51% 100%; 
 
    background-repeat: no-repeat; 
 
    background-position: 0% 0%, 100% 0%; 
 
    padding-top: 80px; 
 
} 
 
.masked:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 0px; 
 
    height: 80px; 
 
    width: 100%; 
 
    background: url(http://lorempixel.com/1000/100/nature/1); 
 
    -webkit-mask-image: linear-gradient(to bottom, black, black), radial-gradient(circle at 50% 100%, transparent 50%, black 55%); 
 
    -webkit-mask-size: 100% calc(100% - 12px), 12px 12px; 
 
    -webkit-mask-position: 0% 0%, 0px 68px; 
 
    -webkit-mask-repeat: repeat-x; 
 
}

<div class="masked">Lorem Ipsum Dolor Sit Amet</div>