Как сверстать такой border?

Question

[SuperToster]

Как сделать такой border?

Answer 1

[0xD34F]

https://codepen.io/anon/pen/QYXYbv?editors=1100

Comments

[SuperToster]

0xD34F,
Откуда у вас время находится помогать нубикам на Тостере?) С таким мозгом у вас невпроворот работы должно быть с оплатой 500 баксов в час или типа того : )
Большое спасибо! Как обычно : )

[0xD34F]

у вас невпроворот работы должно быть с оплатой 500 баксов в час

Спасибо, посмеялся.

[SuperToster]

0xD34F,
ну чёрте его.. Я вот с js не дружу, меня только что поставила в тупик дурацкая рамочка. Работаю ui + вёрстка третий год, ~80-100 в месяц.
У вас уровень (субъективно), где то там за облаками. Вот так и "преувеличил" : )

[Сергей delphinpro]

SuperToster, боюсь вас огорчить, но это крайне простая задача. минуты три (может пять), и то — на печатание кода.

[WapSter]

SuperToster, вам все дали верный вариант, в расчете что вы более или менее опытный верстальщик, просто словами. А задача и вправду очень простая.

[KononovD]

Можно же было сделать нижний бордер, а перегородки сделать псевдо-элементами, я думаю

[0xD34F]

KononovD, можно. Просто я не сразу увидел, что боковые бордеры наполовину, так что переделывал на ходу... Получившийся вариант не самый удачный, это да.

[Andrew Garfield]

Объясните, что здесь выполняют .item::before, .item::after ?
Не совсем понял, как убралась 1 половина границы.

[KononovD]

Andrew Garfield, перекрывают верхнюю половину бордера))

[KononovD]

Andrew Garfield, поменяйте bg этих элементов и станет все понятно)

[Andrew Garfield]

KononovD, Хм, спасибо) Но вот еще что не понятно, почему тогда если уменьшить ширину, то граница начинает появляться, несмотря на background: white; ?

[KononovD]

Andrew Garfield, ширина псевдоэлементов == ширине бордера справа и слева, и они исполняют роль костылей, #ящитаю

я бы сделал просто нижний бордер и псевдоэлементам(у пунктов меню) и сделал бордеры по бокам:
li:after, li:before{
content: "";
display: block;
width: 4px;
height: 50%;
margin-left:-2px;
}
+ у before left:0; у after right:0;

и усе)

[Andrew Garfield]

Уже понятнее. Спасиб)

Answer 2

[Сергей Романенко]

Вот сделал как вариант так: scratchpad.io/likeable-iron-8465

<style>
  body {
    background: black;
  }
  
  .box {
    color: black;
    border-bottom: 2px solid red;
    text-align: center;
    padding: 40px;
    position: relative;
    background: white;
  }
  
  .box-border-left {
    border-left: 2px solid red;
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0;
  }
  .box-border-right {
    border-left: 2px solid red;
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 0;
  }
</style>
<div class="box">
   <div class="box-border-left"></div>
   <div class="box-border-right"></div>
   <div class="box-content">
     Some text
   </div>
<div>