この不規則な形の境界線を純粋なCSS（画像なし）で作成するにはどうすればよいですか？

12

私はこれを効果的に作成するために背景画像（または画像ベースのソリューション）を使用しないようにしています：

不規則な境界線

注：赤い矢印は、問題の境界線を指しているだけです。矢印を回答に含めないでください。

この不規則な形の境界線を純粋なCSS（画像なし）で作成するにはどうすればよいですか？画像が避けられない場合、最も簡潔で読みやすい答えが支持され、受け入れられます。

css borders

— ミカ・ボレン
ソース

12

CSSを使用できます（これはIEの古いバージョンでは機能しないことに注意してください）。

たとえば、長方形と2つの三角形のような形状を組み合わせることができます。このjsfiddleを参照してください。

ここに画像の説明を入力してください

HTML：

<div id="square"></div>
<div class="align">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
</div>

そして、CSS：

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-left: 100px solid transparent;
}

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 40px solid red;
    border-right: 100px solid transparent;
}

#square {
    background-color:red;
    clear:both;
    height:60px;
    width:200px;
}

.align div {
    float: left;
}

ここでさまざまなCSS形状を見ることができます。すべてではないにしても、ほとんどの場合、1つ以上のdivが必要になるため、課題はより暗い境界線を適用することです。

— イセラ
ソース

ポリゴンがパーセンテージベースの幅を使用する場合、これを行う方法はありますか？

— ミカボレン

Yiselaのアプローチを使用すると、1つのdivで三角形を作成できます（境界線の左と境界線の右が正方形の幅の1/2、境界線の上部=希望の高さ、および（-1 *境界線の上部）のマージン上部を追加します）。テキストが三角形をラップしないように、正方形にパディング値を追加する必要があります

— horatio

2

あなたは、疑似要素に、これらの追加の形状を入れることができます:beforeし、:afterあなたの保つためにhtml「クリーン」。:before左の三角形、だろう:after正しいもの。

— ビンセント14

7

Yiselaの答えは確かですが、私はこの代替案を提案すると思いました。CSSシェイプとクリップパスでポリゴンまたは画像URIを使用します。ここに簡単なチュートリアルがあります。

このメソッドは、現時点では三角形のボーダートリックよりも少ないブラウザーで動作することに注意してください。ただし、より複雑なシェイプを使用する場合や、テキストをシェイプにラップする場合は、これが最適な方法です。

デモスクリーンショット

— ジョーイ・コーデス
ソース

このソリューションは、ポリゴンにパーセンテージベースの幅を使用する必要がある場合でも機能するようです。おそらく、CSS vwユニットによって。その音は可能ですか？

— ミカボレン

2

サポートが制限される可能性のある別の方法は、「CSSにSVGを埋め込む」です。私自身はこれを試していませんが、イメージリソースをオブジェクトのcss宣言内のURLとして提供し、データを含む適切にエスケープされたURLを渡すという考えです。

SVGはプレーンテキスト/ xml形式です。ポリゴンの例（w3schoolsから）：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

インライン（埋め込み）SVG（簡略化）の例（stackoverflowから）：

url("data:image/svg+xml;utf8, <svg></svg>");

SVGデータは、インラインで使用するために適切に「エスケープ」する必要があることに注意してください。これにより、SVGファイルを単にリンクする場合よりも魅力がやや低下します。

上記のリンクされたスレッドのメソッドの実行可能性に関する議論があります。白塗りの三角形のような単純なものを埋め込むことは、サポートがあれば簡単な決定だと思います。複雑なSVG形式のデータは、インラインではなくSVGファイルとして保存する必要があります。

SVGファイルはベクトルであり、「境界線」メソッドとは異なり、パーセンテージでスケーリングできます。また、それらは（現在）リストされているクリッピングパスメソッドよりも優れた（少なくとも非インライン）サポートを持っています。プレーンテキストであるSVGは、PHPなどのサーバー側スクリプトを使用して、その場で出力することもできます。

— ホレイショ
ソース

0

画像上の青い領域が透明なpngで、白い領域が透明な場合、このHTMLを含めて影を落とす必要があります。

<svg height="0" xmlns="http://www.w3.org/2000/svg">
    <filter id="drop-shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>
        <feOffset dx="12" dy="12" result="offsetblur"/>
        <feFlood flood-color="rgba(0,0,0,0.5)"/>
        <feComposite in2="offsetblur" operator="in"/>
        <feMerge>
            <feMergeNode/>
            <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

そして、画像にこのCSSを使用します：

.shadowed {
    -webkit-filter: drop-shadow(12px 12px 25px rgba(0,0,0,0.5));
    filter: url(#drop-shadow);
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
}

これは完全にクロスブラウザのソリューションです。

— ボガティリョフ
ソース