Как можно получить блок такой формы? Вариант с бордерами не подходит, в блоке фоном изображение..
1 ответ
Не проверял, но должно работать:
div {
width: 128px;
height: 128px;
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=128&d=identicon&r=PG);
position: relative;
border: 1em solid silver;
margin: 1em auto;
}
div:before, div:after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 0;
border-style: solid;
}
div:before {
left: 0;
border-width: 64px 0 64px 64px;
border-color: transparent transparent transparent silver;
}
div:after {
right: 0;
border-width: 64px 64px 64px 0;
border-color: transparent silver transparent transparent;
}
<div></div>
:before
и:after
элементы сtransform: rotate(45deg)
попробуйте