Стилизация блоков, как создать шестиугольный блок?

#html #css #html5 #css3 #вёрстка

Как добиться вот такого отображения блоков при вёрстке?

Они в форме галочки (на сайте их несколько).




    

Ответы

Ответ 1

*,
*:before,
*:after {
  box-sizing: border-box;
  margin:0;
}

.block-1 {
  position: relative;
  height: 150px;
  background: #8b8b89;
  padding-bottom: 60px;
  text-align: center;
}

.block-1:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 50px solid transparent;
  border-left: 50vw solid red;
  border-right: 50vw solid red;
  border-bottom: 4px solid red;
}

.block-1:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 50px solid transparent;
  border-left: 50vw solid #fff;
  border-right: 50vw solid #fff;
}

.block-2 {
  position: relative;
  height: 150px;
  background: #8b8b89;
  padding-bottom: 60px;
  padding-top: 60px;
  text-align: center;
}

.block-2:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 50px solid #fff;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
}

.block-2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-top: 50px solid transparent;
  border-left: 50vw solid #fff;
  border-right: 50vw solid #fff;
}
блок 1
карта


Ответ 2

Надо отметить тот факт, что проблема с реализацией в IE и EDGE, 
посмотреть можно тут



div {
  width: 100%;
  height: 300px;
  background: linear-gradient(to left, red, gray, orange,red, gray, orange);
  clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 50%, 50% 100%, 0% 50%);
}