Hover с косым bg и расположение элементов в строке

Question

Очень много времени потратил и никак не могу логически понять, как именно все необходимо реализовать. Есть меню, которому необходимо сделать ховер эффект На крайних элементах справа и слева обрезается и остается ровная сторона

Второй вопрос в том, что если будет необходимо добавить больше элементов меню, то как элементы, которые не поместились в одной строке, переходили бы на вторую

Буду рад даже подсказки, в каком направлении искать решение.

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.menu {
  margin-top: 9px;
  height: 50px;
  background-color: #87b301;
  margin-top: 9px;
  display: flex;
  justify-content: space-between;
}
.menu ul {
  display: flex;
  justify-content: space-between;
  width: 798px;
  background-color: #87b301;
  overflow: hidden;
}
.menu ul li {
  padding: 15px;
  height: 50px;
  transform: skew(-15deg);
  display: flex;
  align-items: center;
}
.menu ul li a {
  transform: skew(15deg);
  text-decoration: none;
  color: #3e2b00;
  font-family: Candara;
  font-size: 20px;
  font-weight: 400;
}
.menu ul li:hover {
  box-shadow: inset 1px 1px 1px rgba(250, 172, 6, 0.75);
  background-color: #6c9000;
  background-image: linear-gradient(to bottom, #efca03 0%, #fec626 51%, #e5b20d 100%);
}
.menu form {
  margin-right: 16px;
  margin-top: 11px;
  display: flex;
}
.menu form input {
  width: 227px;
  height: 30px;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  border: none;
}
.menu form .input--button button {
  margin-left: 3px;
  width: 62px;
  height: 30px;
  background-color: #c9c6c6;
  border: none;
  color: #020300;
  font-family: Candara;
  font-size: 16px;
  font-weight: 400;
}

<div class="container">
      <div class="menu">
         <ul>
            <li><a href="#">О компании</a></li>
            <li><a href="#">Справочник</a></li>
            <li><a href="#">Прайс</a></li>
            <li><a href="#">Услуги</a></li>
            <li><a href="#">Обратная связь</a></li>
            <li><a href="#">Контакты</a></li>
         </ul>
         <form action="" method="get">
            <input name="s" placeholder="" type="search">
            <div class="input--button">
               <button type="submit">Поиск</button>
            </div>
         </form>
      </div>
   </div>

Answer 1

надо через :before и :after с боков построить треугольнички

посмотреть как их надо строить можно через любой генератор (например, http://apps.eky.hk/css-triangle-generator/) - это связано с тем как вообще выглядит граница (border) большой толщины

* {
  box-sizing:   border-box;
}

.menu {
  width:        calc(100% - 50px);
  height:       40px;

  margin:       10px;
  padding:      0px 10px 0px 10px;
  
  border:       1px solid #87b301;

  background:   white;
  /*background:   #87b301;*/
}

.item {
  position:     relative;
  
  display:      inline-block;
  
  padding:      0px 10px 0px 10px;
  
  line-height:  40px;
  
  font-family:  Calibri;
  font-weight:  700;
  font-size:    14px;
  
  color:        black;
  
  background:   #87b301;
}

.item:before {
  content:      '';
  
  position:     absolute;
  left:         -10px;
  top:          0px;

  width:        0;
  height:       0;
  border-style: solid;
  border-width: 0 0 40px 10px;
  border-color: transparent transparent #87b301 transparent;
}

.item:after {
  content:      '';
  
  position:     absolute;
  right:        -10px;
  top:          0px;

  width:        0;
  height:       0;
  border-style: solid;
  border-width: 40px 10px 0 0;
  border-color: #87b301 transparent transparent transparent;
}

.item.selected {
  background:   #f4c90f;
}

.item.selected:before {
  border-color: transparent transparent #f4c90f transparent;
}

.item.selected:after {
  border-color: #f4c90f transparent transparent transparent;
}

<div class = 'menu'>
  <div class = 'item'>Внимание!</div>
  <div class = 'item selected'>Вот такой</div>
  <div class = 'item'>Пример</div>
</div>

P.S.

по идее код можно усложнить (в примере автора не видно), например у самого левого блока левая граница должна быть прямая:

сделать это можно так:

.item:first-child:before {
  border-color: #87b301;
}

.item.selected:first-child:before {
  border-color: #f4c90f;
}

    * {
      box-sizing:   border-box;
    }

    .menu {
      width:        calc(100% - 50px);
      height:       40px;

      margin:       10px;
      padding:      0px 10px 0px 10px;
      
      border:       1px solid #87b301;

      background:   white;
      /*background:   #87b301;*/
    }

    .item {
      position:     relative;
      
      display:      inline-block;
      
      padding:      0px 10px 0px 10px;
      
      line-height:  40px;
      
      font-family:  Calibri;
      font-weight:  700;
      font-size:    14px;
      
      color:        black;
      
      background:   #87b301;
    }

    .item:before {
      content:      '';
      
      position:     absolute;
      left:         -10px;
      top:          0px;

      width:        0;
      height:       0;
      border-style: solid;
      border-width: 0 0 40px 10px;
      border-color: transparent transparent #87b301 transparent;
    }

    .item:after {
      content:      '';
      
      position:     absolute;
      right:        -10px;
      top:          0px;

      width:        0;
      height:       0;
      border-style: solid;
      border-width: 40px 10px 0 0;
      border-color: #87b301 transparent transparent transparent;
    }

    .item.selected {
      background:   #f4c90f;
    }

    .item.selected:before {
      border-color: transparent transparent #f4c90f transparent;
    }

    .item.selected:after {
      border-color: #f4c90f transparent transparent transparent;
    }

    .item:first-child:before {
      border-color: #87b301;
    }

    .item.selected:first-child:before {
      border-color: #f4c90f;
    }

    <div class = 'menu'>
      <div class = 'item'>Внимание!</div>
      <div class = 'item selected'>Вот такой</div>
      <div class = 'item'>Пример</div>
    </div>

Answer 2

А если проще? Через inline-block, float и отступы? Пример:

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.menu {
  display: flex;
  overflow: hidden;
  justify-content: space-between;
  margin-top: 9px;
  background-color: #87b301;
}

.menu ul {
  display: block;
  overflow: hidden;
  margin: 0;
  margin-left: -10px;
  padding: 0;
  background-color: #87b301;
}

.menu ul li {
  display: inline-block;
  float: left;
  padding: 0 15px;
  transform: skew( -15deg);
}

.menu ul li a {
  display: inline-block;
  transform: skew( 15deg);
  text-decoration: none;
  color: #3e2b00;
  font-family: Candara;
  font-size: 20px;
  font-weight: 400;
  height: 50px;
  line-height: 50px;
  padding-left: 5px;
}

.menu ul li:hover {
  box-shadow: inset 1px 1px 1px rgba(250, 172, 6, 0.75);
  background-color: #6c9000;
  background-image: linear-gradient(to bottom, #efca03 0%, #fec626 51%, #e5b20d 100%);
}

.menu form {
  margin-right: 16px;
  margin-top: 11px;
  display: flex;
}

.menu form input {
  width: 227px;
  height: 30px;
  box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.15);
  background-color: #ffffff;
  border: none;
}

.menu form .input--button button {
  margin-left: 3px;
  width: 62px;
  height: 30px;
  background-color: #c9c6c6;
  border: none;
  color: #020300;
  font-family: Candara;
  font-size: 16px;
  font-weight: 400;
}

<div class="container">
  <div class="menu">
    <ul>
      <li><a href="#">О компании</a></li>
      <li><a href="#">Справочник</a></li>
      <li><a href="#">Прайс</a></li>
      <li><a href="#">Услуги</a></li>
      <li><a href="#">Обратная связь</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
    <form action="" method="get">
      <input name="s" placeholder="" type="search">
      <div class="input--button">
        <button type="submit">Поиск</button>
      </div>
    </form>
  </div>
</div>

Answer 3

Второй вопрос в том, что если будет необходимо добавить больше элементов меню, то как элементы, которые не поместились в одной строке, переходили бы на вторую

Лучше всего сделать через flex, как мне кажется используя flex-start

.menu {
  display:          flex;
  flex-direction:   row;
  justify-content:  flex-start;
  flex-wrap:        wrap;
  
  width:      250px;
  border:     1px solid black;
}

.menu div {
  display:    inline-block;

  border:     1px solid orange;
  margin:     5px;
  padding:    5px;
}

<div class = 'menu'>
  <div>Раз</div>
  <div>Два</div>  
  <div>Три</div>  
  <div>Четыре</div>  
  <div>Пять</div>  
  <div>Вышел</div>  
  <div>Зайчик</div>  
  <div>Погулять</div>  
</div>

БЛОГ НА HUSL

Hover с косым bg и расположение элементов в строке

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