Использование маски CSS без элемента, действующего подобно переполнению: hidden;

Question

Я пытаюсь применить маску CSS к элементу, который также имеет дочерние элементы, расположенные за пределами родителя. Проблема в том, что когда я добавляю маску, дочерние элементы исчезают точно так же, как если бы я поставил родительский элемент на переполнение: hidden;

Есть ли способ избежать этого? Я понимаю, что, возможно, это может быть желаемое поведение в разы (всегда?), Но для меня это нарушает макет. (Редактирование: возможно, это будет определение установки маски).

Я установил JS-скрипку с тем, что я пытаюсь сделать. Прокомментируйте маску -webkit-маска, чтобы увидеть внешний элемент.

http://jsfiddle.net/jknn9/

@Nate B получил его: http://jsfiddle.net/jknn9/2/

Answer 1

К сожалению, то, что вы видите весь смысл маски. Как сказал на Webkit's blog:

Маска поэтому наложение ребенка и всех его потомков, и как минимум будет выбивать все вне границы коробки объекта.

В качестве альтернативы, возможно, вы используете другой псевдо-элемент (:after) и создайте красный прямоугольник, который будет выступать в качестве «шапки» до конца этикетки и нанесите маску на то, что вместо родительского элемента ,