Можно ли вырезать секцию треугольника из div с помощью CSS?

Можно ли разрезать треугольник от <div>, как на рисунке ниже?

Фон на самом деле не только цвет, но в моем случае это размытое изображение, поэтому я не могу просто покрыть зеленый <div> коричневым изображением треугольника. Есть ли какой-то другой способ CSS для достижения этого эффекта? Спасибо.

Ответ 1

Иллюзия этого возможна: http://jsfiddle.net/2hCrw/4/

Протестировано: IE 9, 10, Firefox, Chrome, Safari на ПК и iPad.

::before и ::after псевдоэлементы перекошены для обеспечения каждой стороны треугольника.
Обертка, используемая для обрезания перекошенных псевдоэлементов. Вы можете избежать этого, используя внешний контейнер в качестве оболочки.
Элементы все еще могут быть оформлены с помощью границ, теней и т.д.
Все, что внизу, будет отображаться правильно.

Демо с границами и тени: http://jsfiddle.net/2hCrw/8/

_{В этой демонстрации также добавлена настройка для iPad с сетчаткой, чтобы предотвратить разрыв между элементом и псевдоэлементами (вызванными отбрасыванием тени или подпиксельной обработкой).}

<div id="wrapper">
    <div id="test">test</div>
</div>


#wrapper {
    overflow: hidden;
    height: 116px;
}
#test {
    height: 100px;
    background-color: #ccc;
    position: relative;
}
#test::before {
    content:"";
    position: absolute;
    left: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
#test::after {
    content:"";
    position: absolute;
    right: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}

В качестве альтернативы вы можете использовать прозрачное изображение и "расширить" элемент над ним с помощью псевдоэлементов. Я ответил на аналогичный вопрос в отношении круга, отрезанного от элемента, и показывал варианты поддержки до IE7 (а также будущие варианты истинного отсечения/маскирования в CSS).

Ответ 2

Вы можете сделать что-то подобное с помощью маски CSS (примеры):

http://codepen.io/anon/pen/vgbEH (анти-треугольная маска)
http://codepen.io/anon/pen/pEufn (треугольная маска)

Я использовал свойство clip-path: polygon(…), но только мой Chrome, похоже, его поддерживает; вместо этого вы можете создавать изображения многоугольников и ссылаться на них с помощью mask-image для более широкой поддержки.

Ответ 3

Невозможно вырезать из div в css, но можно использовать изображение, накладывающееся на div, чтобы оно выглядело так, будто оно было разрезано.

.triangle{
    background-image: url('cut.png');
    width: 24px; height: 24px;
    z-index: 1;
    position: absolute; top: 32px; left: 15px;
}

Ответ 4

Похоже, что на вашем <div> тоже есть тень тени, и я думаю, что треугольник должен уважать.

В настоящее время CSS не обеспечивает способ достижения этого напрямую. Один из подходов состоял в том, чтобы создать изображение зеленой нижней области <div> с вырезанием треугольника в нем (используя, например, Photoshop), установить его как фон <div> внутри оригинала <div> и расположите его вне оригинала <div>.

Вот пример JS Fiddle, который, надеюсь, объясняет идею:

http://jsfiddle.net/7y6nz/