Как сделать пятиугольный блок!

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

Подскажите пожалуйста как сделать такой блок?!
    

Ответы

Ответ 1

.clip-polygon {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}



Ответ 2

например с помощью clip-path:



.box {
  width: 300px;
  height: 300px;
  margin: 1rem auto;
}

img{
  max-width: 100%;
  width: 100%;
  height: auto;
}

.box {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
          clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

  



Ответ 3

.img-box {
  position: relative;
  width: 600px;
  height: 450px;
}

.img-box:before {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 100px solid #fff;
  border-right: 300px solid transparent;
  position: absolute;
  left: 0;
  bottom: 0;
}

.img-box:after {
  content: "";
  width: 0;
  height: 0;
  border-bottom: 100px solid #fff;
  border-left: 300px solid transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}

  





DEMO: https://jsfiddle.net/verstala/tokoc6do/