Как рисуется такой блок

Question

Подскажите пожалуйста, как сверстать такой блок со стрелочками? на HTML+СSS

По совету Meth0d получилось сделать такое (как сделать разделительные линии?)

Answer 1

Реализация довольно тривиальная - псевдоэлементы с трансформацией:

.blockArrow {
  position: relative;
  display: inline-block;
  height: 100px; width: 100px;
  margin-left: 19px;
}
.blockArrow::before,
.blockArrow::after {
  content: "";
  position: absolute;
  left: -10px; z-index:-1;
  height: 50%; width: calc(100% + 20px);
  border: 1px solid #000;
  box-sizing: border-box;
  background-color: #fa08;
}
.blockArrow::before {
  top: 0;
  border-bottom: none;
  transform: skewx(20deg);
}
.blockArrow::after {
  bottom: 0;
  border-top: none;
  transform: skewx(-20deg);
}

<div class="blockArrow">blockArrow 1</div><div class="blockArrow">blockArrow 2</div>

Answer 2

Svg отлично подходят для создания фигур в html

Используйте polygon element для рисования фигур.
Text element для описания ссылки.
A element для создания ссылки.

#arrow-menu a polygon {
  fill: #888;
  stroke: #222;
}
#arrow-menu a:hover polygon {
  stroke: #222;
  fill: black;
}
#arrow-menu a:hover text {
  fill: cornflowerblue;
}
#arrow-menu a {
  font-size: 5px;
}

<svg id="arrow-menu" viewBox="-1 -1 112 22" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="#">
    <polygon points="0,0 20,0 25,10 20,20 0,20 0,0"></polygon>
    <text x="1.5" y="11.5">Menu link</text>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(22)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(44)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
  <a xlink:href="#">
    <polygon transform="translate(66)" points="0,0 20,0 25,10 20,20 0,20 5,10 0,0"></polygon>
  </a>
</svg>

Перевод ответа: How to make a div with arrowlike side without css border tricks? @Persijn

БЛОГ НА HUSL

Как рисуется такой блок

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

Svg отлично подходят для создания фигур в html