Нужно срезать углы блока так что бы фон срезанных частей был прозрачным. (фон будет изображением, так что треугольники не подойдут). При этом нужно что бы у всего блока со срезанной частью была рамка, и потому тут проблема.
Я создал срез с помощью clip-path, но рамка блока срезается так же как и он сам, в итоге выходит так:
html,
body,
.bdiv,
.mainblock {
height: 100%;
width: 100%;
overflow: hidden;
}
.bdiv {
display: table;
}
.mainblock {
display: table-cell;
vertical-align: middle;
}
.mainblock>div {
position: relative;
width: 500px;
background: #444;
margin: 0 auto;
}
.content {
padding: 10px 30px;
text-align: center;
font-size: 16px;
font-family: sans-serif;
color: ddd;
}
.head-text {
clip-path: polygon(460px 0, 100% 30px, 100% 100%, 0 100%, 0 0);
font-size: 18px;
color: #eee;
border: 5px solid #fff;
background: #333;
}
.cont-text {
background: #000;
}
.cont-text>form input {
padding: 5px;
width: 40%;
}
Можно, конечно, добавить абсолютный блок-линию как рамка поверх среза, но по-моему так не делается. Но как тогда? Мне нужно 2 таких среза, один как на картинке, а второй слева внизу.
Ответ
html, body, .bdiv, .mainblock { height: 100%; width: 100%; overflow: hidden; } .bdiv { display: table; } .mainblock { display: table-cell; vertical-align: middle; } .mainblock>div { position: relative; width: 500px; /* background: #444; */ margin: 0 auto; } .content { padding: 10px 30px; text-align: center; font-size: 16px; font-family: sans-serif; color: #ddd; } .head-text { -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px); clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 15px); font-size: 18px; color: #eee; background: url(https://www.noupe.com/wp-content/uploads/2009/10/pattern-13.jpg) center no-repeat; } .box { background: #fff; -webkit-clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px); clip-path: polygon(0 0, 90% 0, 100% 30px, 100% 100%, 10% 100%, 0 25px); padding: 5px; } .cont-text { background: #000; } .cont-text>form input { padding: 5px; width: 40%; } body { background: #444; }
Комментариев нет:
Отправить комментарий