ボーダーをボーダーに追加するには？

Question

私は次のアイテムを持っています。私はこの国境に国境を置く必要があります。私は影を使用しようとしましたが、問題を解決しません。

#hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: red; 
 
    position: relative; 
 
} 
 
#hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid red; 
 
}

<div id="hexagon">

私はパーセンテージでborder-left、border-rightまたはborder-topの値を変更していた場合、それは動作しません。

編集：

これは私が達成しようとしているものです。上の矩形で下の方を指し、異なる色の罫線を持つ白い領域。

Answer 1

境界を直接追加することはできませんが、1pxだけ異なる擬似要素のオフセットを使用して同じ方法で構築できます。ここでは、1pxの赤い形の下にある黒い形を作成しています。

#hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: red; 
 
    position: relative; 
 
border:1px solid black; 
 
} 
 
#hexagon:after, #hexagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid red; 
 
} 
 
#hexagon:before { 
 
    bottom: -26px; 
 
    border-top-color: black; 
 
}

<div id="hexagon"></div>

Answer 2

私は第2の疑似要素を使用するようにコードを調整し、前のものよりも少し低く、それを配置しました。

#hexagon { 
 
    width: 100px; 
 
    height: 55px; 
 
    background: red; 
 
    position: relative; 
 
} 
 
#hexagon:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -25px; 
 
    left: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 50px solid transparent; 
 
    border-right: 50px solid transparent; 
 
    border-top: 25px solid red; 
 
} 
 
#hexagon:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -27px; 
 
    left: -2.5px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    border-top: 27px solid blue; 
 
}

<div id="hexagon">

Answer 3

アンディが言うように、通常のトリックは少し大きく同じ形状を作成する、またはいくつかの側にシフトします。

ただし、角度を考慮する必要があります。たとえば、左端を考えてみましょう。新しい「境界線」が10ピクセル左から始まる場合、境界線の幅は10ピクセルのようになります。

ここで斜めのエッジを考えてみましょう。斜め45度の傾斜があるとしましょう。左に10ピクセルを始めると、人間の目は垂直方向の境界線の幅を計算するため、7.07ピクセルになります。左に10ピクセル、下に10ピクセルを開始すると、14.14ピクセルになります。

これは正しく調整できません。場合によっては、三角法の計算を使用することもできますが、複雑になることがあります。

代わりに、解決策はです。SVGを使用してください。