このポリゴンの周りの境界を取得するには？

Question

私は以下のようにpolygonを使用して5つのコーナーを持つ形状を作成しました。

これは、それを作るために必要なCSSです：

div { 
    width: 280px; 
    height: 280px; 
    background: #1e90ff; 
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    border: 3px solid black; 
    border-bottom-left-radius: 15px; 
    border-top-left-radius: 15px; 
} 

残念ながら私は（それが右側に欠けている）、それはすべての形状の周りに黒い境界線を追加することができません。どうすればいい？

私はフィドルhereを作成しました。

Answer 1

borderプロパティは、要素の外側を周回し、そしてclip-pathプロパティは、要素にマスクを適用します。だから、他のCSSルールに関する限り、あなたはまだ四角形を扱っています。このため、単に境界線を適用することはできません。

しかし、あなたが望む効果に非常に近づくことは不可能ではありません。 CSSの擬似要素、枠線、およびフィルタを使用すると、同じ図形と、単一のHTML divのみを持つ輪郭を作成できます。

div { 
 
    position: relative; 
 
    width: 210px; 
 
    height: 280px; 
 
    background: #1e90ff; 
 
    border-bottom-left-radius: 15px; 
 
    border-top-left-radius: 15px; 
 
    filter: 
 
    drop-shadow(0px 3px 0 black) 
 
    drop-shadow(0px -3px 0 black) 
 
    drop-shadow(3px 0px 0 black) 
 
    drop-shadow(-3px 0px 0 black); 
 
    -webkit-filter: 
 
    drop-shadow(0px 3px 0 black) 
 
    drop-shadow(0px -3px 0 black) 
 
    drop-shadow(3px 0px 0 black) 
 
    drop-shadow(-3px 0px 0 black); 
 
} 
 
div::after { 
 
    position: absolute; 
 
    display: block; 
 
    content: ''; 
 
    width: 0; 
 
    height: 0; 
 
    left: 210px; 
 
    top: 0; 
 
    border-left: 70px solid #1e90ff; 
 
    border-right: 70px solid transparent; 
 
    border-top: 140px solid transparent; 
 
    border-bottom: 140px solid transparent; 
 
}

<div> 
 
</div>

だから、ここで何が起こっているの？

メインのdiv要素は、形状の矩形部分です（左上角と左下角が丸みを帯びています）。また、三角形を作成する::afterpseudo-elementがあります。三角形の形状は、CSS border-triangle hackを使用して行われます。

いいえ、要素のいずれかをマスクする必要なくシェイプを作成しますが、私はすでに境界線を使用して三角形を作成しているため、境界線を直接適用することはできません。 CSS outlineまたはbox-shadowを使用することが次の論理的選択肢になりますが、両方のプロパティは要素の境界ボックスの周りにあります。丸い角やハッキーな透明な枠などの機能は無視します。

CSSフィルタのプロパティを入力します。これにより、一連の後処理フィルタが提供されます。注目すべき重要な点は、要素の境界ボックスを尊重するのではなく、適用時に要素を透明マスクとして扱い、ドロップシャドウフィルタがあることです。

残念ながら、box-shadowプロパティほどフレキシブルではありません。要素よりも大きな立体図形を作成するために使用できる「spread」パラメータがありません。これを回避するには、上、下、右、左の各方向にドロップシャドウをキャストする必要があります。それはこの怪獣が入る場所です：

filter: 
    drop-shadow(0px 3px 0 black) 
    drop-shadow(0px -3px 0 black) 
    drop-shadow(3px 0px 0 black) 
    drop-shadow(-3px 0px 0 black); 

タダ！

これを拡張する：これは、作成することができるすべてのシェイプで機能します（クリッピングしない限り）。境界線を取得するには、要素にドロップシャドーフィルタを適用するか、親/ラッパーdiv（マルチエレメントシェイプの場合）にドロップシャドウフィルタを適用するだけです。

Answer 2

私はここで擬似キックをしていますが、いつでも要素を黒色で再現し、オリジナルの後ろに投げて輪郭の印象を与えることができます。ほとんどの目的に適していますが、提案はこのコードで説明されています。http://codepen.io/anon/pen/MeJorM

コードが変更されました。あなたのオリジナルは ".orig"です。

div.orig { 
    position:relative; 
    width: 280px; 
    height: 280px; 
    background: #1e90ff; 
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    border: 1px solid black; 
    border-bottom-left-radius: 15px; 
    border-top-left-radius: 15px; 
    display:block; 
} 
div.abc { 
    position:relative; 
    width: 280px; 
    height: 280px; 
    background: #000; 
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    border: 1px solid black; 
    border-bottom-left-radius: 15px; 
    border-top-left-radius: 15px; 
    display:block; 
} 
div.abc div.def{ 
    top:-0.02em; 
    left:-0.2em; 
    position:absolute; 
    display:block; 
    width: 278px; 
    height: 280px; 
    background: #1e90ff; 
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%); 
    border: 1px solid black; 
    border-bottom-left-radius: 15px; 
    border-top-left-radius: 15px; 
}