Для этого альтернативного эффекта подогнутых уголков на CSS3 мы использовали технику скошенных углов от Lea Verou.
HTML
Следующая разметка довольно сильно сходится с решением от Joshua Hibbert. Здесь не нужно ничего менять или улучшать. На первый взгляд вы, возможно, подумаете, что мы сюда что-то добавили, но на самом деле нам понадобится лишь то, что представлено ниже, для создания четырех уголков при помощи псевдо-элементов в CSS.
<div class="tucked-corners-top">
<div class="tucked-corners-bottom">
<!-- content here -->
</div>
</div>
CSS-код
Расширенный селектор [class*='tucked-corners-'] будет выбирать только те элементы, которые где-либо в качестве значения атрибута класса будут иметь строку tucked-corners-.
.tucked-corners-top {
position: relative;
width: 500px; min-height: 200px;
margin: 100px auto; padding: 20px;
background-color: #fff; /* Fallback */
background: linear-gradient(45deg, transparent 10px, #fff 10px),
linear-gradient(135deg, transparent 10px, #fff 10px),
linear-gradient(225deg, transparent 10px, #fff 10px),
linear-gradient(315deg, transparent 10px, #fff 10px);
background-position: bottom left, bottom right, top right, top left;
background-size: 50% 50%;
background-repeat: no-repeat;
box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5);
}
[class*='tucked-corners-']::before, /* All the four corners */
[class*='tucked-corners-']::after {
content: '';
position: absolute;
height: 20px; width: 80px;
box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5);
box-shadow: none\9; /* Do not show on IE9 #needed */
}
.tucked-corners-top::before, /* Top left & top right */
.tucked-corners-top::after {
top: -10px;
}
.tucked-corners-bottom::before, /* Bottom left & bottom right */
.tucked-corners-bottom::after {
bottom: -10px;
}
.tucked-corners-top::before, /* Top left & bottom left */
.tucked-corners-bottom::before {
left: -42px;
}
.tucked-corners-top::after, /* Top right & bottom right */
.tucked-corners-bottom::after {
right: -42px;
}
.tucked-corners-top::before { /* Top left */
transform: rotate(-45deg);
}
.tucked-corners-top::after { /* Top right */
transform: rotate(45deg);
}
.tucked-corners-bottom::before { /* Bottom left */
transform: rotate(-135deg);
}
.tucked-corners-bottom::after { /* Bottom right */
transform: rotate(135deg);
}
В случае с IE9
Как вам уже известно, IE9 не поддерживает градиенты на CSS3, но он поддерживает параметр box-shadow. Это вызывает ситуацию, которую вы можете видеть ниже:
Мы решили воспользоваться следующим CSS-хаком для того, чтобы скрыть тень псевдо-элементов. К сожалению, в IE9 мы никак не можем реализовать этот эффект.
[class*='tucked-corners-']::before,
[class*='tucked-corners-']::after {
box-shadow: none\9; /* Do not show on IE9 #needed */
}
Посмотреть демо
На этом всё
Несмотря на преимущества и недостатки, этот альтернативный вариант точно следует иметь в виду, если вы хотите использовать подобный эффект в ваших дизайнах. Решение, которое мы представили в данной статье, позволит вам использовать эффект даже тогда, когда вы используете текстуру в качестве фона блока.
Также для себя мы выяснили, что в жизни встречаются такие моменты, когда в голове лучше бы иметь запасные планы и варианты. Всегда будет полезно покопаться в памяти в поисках подходящего варианта!
Дополнительная информация
Точки остановки градации в данном эффекте: 45deg, 135deg, 255deg и 315deg, так как значениями параметра background-position являются bottom left, bottom right, top right, top left.
С версии 16.0 Firefox поддерживает множество CSS3-параметров без префиксов, включая даже градиенты. Здесь отличная новость в том, что их алгоритм градиентов изменился, так как объявления с приставкой -moz- и без нее дают разные результаты.