Пользовательская форма с CSS

Question

Для меню мне бы хотелось, чтобы пользовательская форма была разработана в чистом CSS.

Форма должна выглядеть следующим образом:

Вот что я пробовал с :before и :after

h5:before{
	border-color: #dbb900;
	padding: 0px 5px;
	border-left: 2px solid #2f3539;
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5:after{
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	opacity: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

<h5>My title</h5>

Что мне здесь не хватает?

Спасибо.

Answer 1

Вот более простой способ с одним элементом и без сложного кода:

.element {
  font-size:30px;
  display:inline-block;
  padding-bottom:30px; /*to control the space of the lines under the text*/
  background:
    linear-gradient(blue,blue) 50% 100%/2px 20px, /*middle line [width:2px height:20px]*/
    linear-gradient(blue,blue) calc(50% - 5px) calc(100% - 5px)/2px 15px, /*left line [width:2px height:15px]*/
    linear-gradient(blue,blue) calc(50% + 5px) calc(100% - 5px)/2px 15px; /*right line [width:2px height:15px]*/
  background-repeat:no-repeat;
}

<div class="element">some Text</div>

Answer 2

Вы можете использовать псевдоэлементы в сочетании с box-shadow на : элемент навигационной секции

nav{
  
}
nav ul{
    text-align: center
}
nav li{
    display: inline-block;
    margin: 10px 12px;
}
nav a{
    color: black;
    position : relative;
    display: block;
    text-decoration: none;
    padding: 6px 10px
}
nav a:before,
nav a:after{
  content: "";
    position: absolute;
    left: 50%;
    width: 2px;
    background: currentcolor;
    color: orange;
    top: 100%;
}
nav a:before{ 
    margin-left: -1px;
    height: 32px;
}
nav a:after{ 
    margin-left: -10px; 
    height: 20px;
    box-shadow: 18px 0 0 0 currentColor;
}

<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 3

Полагаю, вы в основном говорите о расположении тех границ, которые вы добавили к :before & :after.

---

Прежде всего, когда вы используете position: absolute;, этобудет абсолютным относительно определенного элемента.

В настоящее время это относительно всего документа.

Если вы скажете, h5 { position: relative; }, :before & :after будет позиционироваться относительно h5 сих соответствующие абсолютные позиции.

---

После того, как вы сделали вышеупомянутое, вы обнаружите, что h5 охватывает всю ширину документа.

Это потому, что h5display: block; по умолчанию.display: inline-block; будет более подходящим в этом случае.

Проверьте фрагмент ниже.

h5:before{
	border-color: #dbb900;
	padding: 0px 5px;
	border-left: 2px solid #2f3539;
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 10px;
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5:after{
	border-right: 2px solid #2f3539;
	position: absolute;
	content: "";
	top: 50%;
	left: 0px;
	bottom: 0px;
	height: 15px; /*10px;*/
	width: 2px;
	margin: 15px auto 0px;
	right: 0px;
	/*opacity: 0;*/
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
h5 {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
}

<h5>My title</h5>