Как реализовать нестандартный блок?

Question

Подскажите, пожалуйста, как лучше всего реализовать нестандартный прямоугольник?

Answer 1

Попробуй свойство clip-path. Существуют генераторы таких фигур. Правда, оно пока не очень поддерживается.

Answer 2

Вы можете "ломать" своё меню как вам будет угодно. В этом вам поможет свойство clip-path, при этом указывая любые нужные координаты. Вот пример:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  background: greenyellow;
  text-transform: uppercase;
  font-size: 14px;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 1px;
  clip-path: polygon(0 0, 3% 0, 10% 15%, 12% 10%, 15% 0, 20% 15%, 25% 0, 70% 0, 75% 15%, 77% 0, 98% 0, 100% 90%, 90% 100%, 70% 100%, 60% 80%, 55% 100%, 35% 100%, 33% 85%, 30% 100%, 3% 100%);
}

li {
  cursor: pointer;
  padding: 10px 20px;
}

li:hover {
  background: limegreen;
}

<ul>
  <li>Главная</li>
  <li>Дома</li>
  <li>Территория</li>
  <li>Ресторан</li>
  <li>Услуги</li>
  <ul>

Дополнительно вы можете применить анимацию при наведении. Например, так:

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 40px;
  background: greenyellow;
  text-transform: uppercase;
  font-size: 14px;
  font-family: monospace;
  font-weight: bold;
  letter-spacing: 1px;
  clip-path: polygon(0% 0%, 3% 0%, 10% 0%, 12% 0%, 15% 0%, 20% 0%, 25% 0%, 70% 0%, 75% 0%, 77% 0%, 100% 0%, 100% 100%, 90% 100%, 70% 100%, 60% 100%, 55% 100%, 35% 100%, 33% 100%, 30% 100%, 0% 100%);
  transition: 1s ease;
}

ul:hover {
  clip-path: polygon(0% 0%, 3% 0%, 10% 20%, 12% 10%, 15% 0%, 20% 15%, 25% 0%, 70% 0%, 75% 15%, 77% 0%, 98% 0%, 100% 90%, 90% 100%, 70% 100%, 60% 80%, 55% 100%, 35% 100%, 33% 85%, 30% 100%, 3% 100%);
}

li {
  cursor: pointer;
  padding: 10px 20px;
  transition: 1s ease;
}

li:hover {
  background: limegreen;
}

<ul>
  <li>Главная</li>
  <li>Дома</li>
  <li>Территория</li>
  <li>Ресторан</li>
  <li>Услуги</li>
</ul>

БЛОГ НА HUSL

Как реализовать нестандартный блок?

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