Как сделать длинный шестиугольник на JS?

Question

Мне надо сверстать длинный шестиугольник. Я видел много примеров с обычным гексагоном, его можно сделать при помощи before и after, но проблема в не прямых углах на фото, то есть я не могу поставить с краю div::after, тк нужен именно тупой угол. Ещё и border-radius требуется)

Answer 1

попробуй через несколько элементов и transform: skew(..deg)

.parent {
  display: block;
  margin: 50px 100px;
  background: lightgreen;
  width: 200px;
  height: 100px;
  border-radius: 5px;
  position: relative;
}

.chld1,
.chld2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.chld1:before,
.chld2:before,
.chld1:after,
.chld2:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 53%;
  background: blue;
  z-index: -1;
  border-radius: 5px;
}
.chld1:before {
  top: 0;
  left: -10%;
  transform: skew(-30deg);
}
.chld1:after {
  bottom: 0;
  left: -10%;
  transform: skew(30deg);
}
.chld2:before {
  top: 0;
  right: -10%;
  transform: skew(30deg);
}
.chld2:after {
  bottom: 0;
  right: -10%;
  transform: skew(-30deg);
}

<div class="parent">
  <div class="chld1"></div>
  <div class="chld2"></div>
</div>

БЛОГ НА HUSL

Как сделать длинный шестиугольник на JS?

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