Подскажите пожалуйста как сделать такой блок?!
3 ответа
.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%);
}
<img class="clip-polygon" src="http://lorempixel.com/output/business-q-c-640-480-1.jpg">
-
-
там чел внизу одновременно со мной запостил. Упомяну так же, что вот тут редактор есть bennettfeely.com/clippy , а ещё у меня свойство clip-path не работало в (очень) старой мобилке – larrymacbarry 8 авг '17 в 14:49
например с помощью 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%);
}
<div class="box">
<img src="http://bennettfeely.com/clippy/pics/miami.jpg" alt="">
</div>
.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;
}
<div class="img-box">
<img src="http://demo.interface.club/limitless/layout_2/LTR/default/assets/images/demo/flat/15.png" alt="Image">
</div>