Как сделать наложение 3D-баннера (??) с помощью CSS

Question

Я хочу создать баннер, который проходит по части страницы, вероятно, я не использую правильную терминологию ...

Я видел это на всё большем и большем количестве сайтов, но, пытаясь найти сайт, используя это, я изо всех сил пытался найти те, которые можно проверить. Но я нашел один интересный пример.

http://www.bmbw.com

- Логотип их заголовка больше, чем остальная часть контента, а два нижних края расположены под углом. - Их «BMBW Updates» и «BMBW Snow Report» также имеют этот эффект на своих краях.

Это стиль, который я пытаюсь сделать, но мне было интересно узнать, как лучше это сделать.

Обновления, Отчет о снегопаде и Навигация (чтобы заголовок выглядел 3d) имеют встроенный в изображение эффект.

Но я также видел эффект по диагонали, и он не мешал функционированию. Наверное, я просто спрашиваю, есть ли другой способ сделать это, кроме как встроить его в само изображение.

Есть идеи?

Answer 1

Вы можете на самом деле добиться такого рода эффекта без каких-либо изображений, используя взломать CSS-треугольник. Я создал jsFiddle с рабочим примером: http://jsfiddle.net/P8W7F/

Answer 2

Я посмотрел на их страницу, но они сделали это с изображением.

Самый простой способ - создать второй элемент div с толстой верхней границей.Если у вас есть этот html:

<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>

, то этот CSS будет делать:

.banner {
    width: 400px;
    margin:auto;
    text-align:center;
    background-color:#eee8aa;
}
.shadow_simple {
    margin:auto;
    width: 360px;
    height:12px;
    border-top: 12px solid #daa520;
    border-left: 20px solid white;
    border-right: 20px solid white;
    border-bottom: none;
}
.next_content {
    width: 360px;
    margin:auto;
    text-align:center;
    background-color:#eee8aa;
    border: 1px solid #daa520;
    margin-top:-24px;
}

То же самое, но с градиентными треугольниками:

<div class="banner">first content</div>
<div class="shadow_gradient">
    <div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>

И CSS:

.banner {
    width: 400px;
    margin:auto;
    text-align:center;
    background-color:#eee8aa;
}
.shadow_simple {
    margin:auto;
    width: 360px;
    height:12px;
    border-top: 12px solid transparent;
    border-left: 20px solid white;
    border-right: 20px solid white;
    border-bottom: none;    
}
.shadow_gradient {
    width: 400px;
    height:24px;
    margin:auto;
    margin-bottom:12px;
    box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
    width: 360px;
    margin:auto;
    text-align:center;
    background-color:#eee8aa;
    margin-top:-36px;
    border:1px solid #daa520
}

Answer 3

CSS градиенты и тени - хороший способ сделать это, если вы используете CSS3