Наложение изображения с инвертированным треугольником CSS

enter image description here

Можно ли сделать что-то подобное в CSS? Я хочу изображение для заголовка, но я хочу, чтобы этот треугольник вырезался из следующего раздела, чтобы показать выше изображение.

Я знаю, как создать сплошной треугольник CSS с границами (что-то вроде этого, например: http://www.dailycoding.com/Posts/purely_css_callouts.aspx), но в этом случае мне нужно либо сделать напротив (возьмите "кусок" из синей части), или сделайте треугольник изображением, которое каким-то образом точно совпадает с изображением, к которому он подключен. Я думаю, могу ли я взять "кусок", что может быть проще

Чтобы сделать это немного сложнее, у меня также есть изображение выше, установленное на background-attachment: fixed и background-size: cover. Таким образом, изображение масштабируется по мере увеличения размера браузера.

Если я не могу сделать это только с помощью CSS и нуждаюсь в изображении, как я могу сделать правильные комбинации изображений, чтобы сохранить треугольник в соответствии с текстом, если текст центрирован по горизонтали на странице? Я думаю что-то вроде этого с двумя длинными div, которые распространяются в поля, а одно точное изображение ширины посередине с прозрачным треугольником:

_____________________________  ___ ______________________  _________________________
|    (really wide for margin)||   V (960px wide image)   || (really wide box again) |

Но можно ли это сделать только с помощью CSS? Или может быть решение SVG (я не так знаком с SVG)? Я в порядке с решением, которое работает только в современных браузерах, поскольку это определенно просто "прогрессивное улучшение".

Ответы

Ответ 1

Вот поворот в концепции треугольников от границ.

HTML

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
</div>

CSS

#container{
    height: 300px;
    background-color: red;
    position: relative;
}

#one {
    position: absolute;
    width: 100px;
    left: 0;
    bottom: 0;
    border-bottom: 20px solid green;
    border-right: 20px solid transparent;
}

#two {
    position: absolute;
    left: 120px;
    bottom: 0;
    right: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}

Альтернатива: я сделал что-то подобное с CSS-преобразованиями (в частности, перекосами). См. CSS (3) и разрез HTML.

Ответ 2

Вы можете сделать это без дополнительной дополнительной разметки, используя ::before и ::after. Вам просто нужно overflow: hidden на контейнере.

Учитывая

<div class="hero">
  <img src="http://farm3.staticflickr.com/2431/3875936992_348d6dd86b_b.jpg" alt=""/>
</div>

CSS будет

.hero {
    position: relative;
    overflow: hidden;
}
.hero img {
    display: block;
    width: 960px;
    height: auto;
}
.hero::before {
    content: "\00A0";
    display: block;
    border: 960px solid #fff; /* the width of the image */
    border-top-width: 0;
    border-bottom-width: 0;
    height: 30px; /* 1/2 the triangle width */
    width: 60px; /* the triangle width */
    position: absolute;
    bottom: 0;
    left: -630px; /* the left offset - the image width */
}
.hero::after {
    content: "\00A0";
    display: block;
    border: 30px solid #fff; /* 1/2 the triangle width */
    border-top: 30px solid transparent; /* 1/2 the triangle width */
    border-bottom-width: 0;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 330px; /* the left offset */
}

Пример в реальном времени: http://codepen.io/aarongustafson/full/nutDB

Ответ 3

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

Я использовал z-index и border-radius для достижения этого эффекта

DEMO

HTML

<div>
    <img src="http://lorempixel.com/500/200/sports/" class="lowerpic"/>
    <div class="leftupperdiv"></div>
    <div class="rightupperdiv"></div>
</div>

CSS

.lowerpic {
    z-index:-1;
    position:absolute;
}
.leftupperdiv {
    z-index:1;
    position:absolute;
    margin-top:150px;
    width:100px;
    height:50px;
    border-radius: 0px 30px 0px 0px;
    background-color: blue;
}
.rightupperdiv {
    z-index:1;
    position:absolute;
    margin-top:150px;
    margin-left:100px;
    width:400px;
    height:50px;
    border-radius: 30px 0px 0px 0px;      
    background-color: blue;
}