Можно ли сделать что-то подобное в 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)? Я в порядке с решением, которое работает только в современных браузерах, поскольку это определенно просто "прогрессивное улучшение".