Как реализовать макет в HTML + CSS?

Question

Сделал несколько попыток осуществить этот макет в HTML + CSS, но безуспешно. При выполнении этого кода появляется такой результат, если использовать вертикальный бордер - результат становится другим. Благодарю за помощь.

.site-header {
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
    z-index:80
}
.navbar {
    justify-content:space-between;
}
.navbar,.navbar-left,.navbar-right {
    display:flex;
    align-items:center
}
.container {
    border-top: 1px solid #121212;
    border-bottom: 1px solid #121212;
    background: #F6B5D5;
    margin-right:auto;
    margin-left:auto;
    padding-right:4vw;
    padding-left:4vw;
    max-width:calc(1140px + 8vw);
    width:100%
}
.navbar-left {
    height:100%
}
.burger {
    position: relative;
    margin-right: 10px;
    margin-left: -9px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.menu-item {
    border-top: 3px solid white;
    border-bottom: 3px solid white;
    margin:0;
    font-size:14px;
    line-height:1;
    font-weight:600;
    letter-spacing:.5px;
    transition:opacity .3s var(--animation-base);
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden
}
.menu-item-link {
    color: #121212;
    position: relative;
    display: inline-block;
    padding: 10px;
}
.nav-list {
    display: flex;
}
.u-plain-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

<header class="site-header container">
    <div class="navbar">
        <div class="navbar-left">
            <div class="burger hidden-lg hidden-xl"></div>
                <nav class="main-menu hidden-xs hidden-sm hidden-md">
                    <ul class="nav-list u-plain-list">
        <li class="menu-item"><a class="menu-item-link">Example1</a></li>
        <li class="menu-item "><a class="menu-item-link">Example2</a></li>            
</ul>
                </nav>
        </div>
    </div>
</header>

Answer 1

Не особо понятна суть вопроса, что именно не понятно, но вот лишь одна возмодная реализация бордеров.

.menu {
  position: relative;
}

.menu::after,
.menu::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  border-top: 2px solid pink;
}

.menu::after {
  top: -4px;
}

.menu::before {
  bottom: -4px;
}

.element {
  display: inline-block;
  position: relative;
  margin-right: 2px;
  padding: 8px 16px;
  background-color: pink;
  color: white;
  text-align: center;
}

.element:not(:last-child)::before {
  content: "";
  display: block;
  position: absolute;
  right: -4px;
  height: 20px;
  border-right: 2px solid pink;
}

<div class="menu">
  <a class="element">Element</a>
  <a class="element">Element</a>
  <a class="element">Element</a>
</div>

Answer 2

Такой вариант?

.nav {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: 
    linear-gradient(to bottom,
      #000 1px,
      transparent 1px,
      #ffdaec 7px,
      #ffdaec calc(100% - 7px),
      transparent calc(100% - 1px),
      #000 1px);
  padding: 10px 0;
  box-sizing: border-box;
}

.nav .item:not(:last-child) {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #000;
}

.nav .wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.nav .name {
  margin-right: 5px;
}

.nav .count {
  background: #f5a8d2;
  padding: 5px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 80%;
}

.nav .count:first-letter {
  font-size: 160%;
}

<div class="nav">
  <div class="item">
    <div class="wrap">
      <div class="name">Dr.Strangelove</div>
      <div class="count">8.9</div>
    </div>
  </div>
  <div class="item">
    <div class="wrap">
      <div class="name">Cool Hand Luke</div>
      <div class="count">2.2</div>
    </div>
  </div>
</div>

Без градиента

.nav {
  display: block;
  width: 100%;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 5px 0;
  box-sizing: border-box;
}

.nav .wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  background: #ffdaec;
  padding: 10px;
  box-sizing: border-box;
}

.nav .item:not(:last-child) {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #000;
}

.nav .wrap {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.nav .name {
  margin-right: 5px;
}

.nav .count {
  background: #f5a8d2;
  padding: 5px;
  box-sizing: border-box;
  font-weight: bold;
  font-size: 80%;
}

.nav .count:first-letter {
  font-size: 160%;
}

<div class="nav">
  <div class="wrapper">
    <div class="item">
      <div class="wrap">
        <div class="name">Dr.Strangelove</div>
        <div class="count">8.9</div>
      </div>
    </div>
    <div class="item">
      <div class="wrap">
        <div class="name">Cool Hand Luke</div>
        <div class="count">2.2</div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как реализовать макет в HTML + CSS?

Ответы (2 шт):