Как добавить границу к границе?

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 в процентах, это не работает.

Edit:

Вот что я пытаюсь достичь. Белая область, прямоугольная сверху, направлена ​​вниз и имеет границу другого цвета.

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

Я отрегулировать свой код, чтобы использовать второй псевдо элемент и расположив его чуть-чуть ниже, чем предыдущий.

#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

Как говорит Энди, обычный трюк создает ту же форму, немного больше, или смещается в сторону какой-то.

Однако вы должны учитывать углы. Например, рассмотрим левый край. Если новая «граница» начинается 10px влево, ширина границы будет выглядеть как 10px.

Но теперь рассмотрим диагональный край, давайте рассмотрим его 45-градусный наклон. Если вы начинаете 10px влево, человеческие глаза будут вычислять ширину границы в перпендикулярном направлении, поэтому она будет равна 7.07px. Если вы начинаете 10px влево и 10px на дно, теперь он будет 14.14px.

Так что это не масштабируется вправо. В некоторых случаях вы можете использовать математику тригонометрии, но это может усложниться.

Вместо этого решение: использование SVG.