CSS> Треугольный угол прозрачная маска

Question

Хорошо, есть немного сложный вопрос. Я уже знаю и часто использую CSS-треугольник для достижения разных макетов, но на этот раз треугольник должен действовать как маска. Он должен иметь прозрачную половину и абсолютно необходимо замаскировать родительский цвет фона.

Существует картина того, чего я не достигнут на разном уровне. Мой дизайнер использовал это почти везде, и мне нужно найти надежный, но гибкий способ сделать это. (click to see screenshot) transparent triangle

Существует как бы я traditionnaly сделать это

.box{ 
 
    position:relative;display:block; 
 
    width:280px;height:140px; 
 
    background-color:#000; 
 
    padding:15px 15px; 
 
} 
 

 
.box.angled:after{ 
 
    border-color:#000000 #ffffff transparent transparent; 
 
    border-width:50px 50px 0 0; 
 
    border-style:solid; 
 
    
 
    position:absolute;display:block; 
 
    width:0;height:0; 
 
    right:0;bottom:0; 
 
    content:' '; 
 
}

<div class="box angled"> 
 
    blah blah blah 
 
</div>

YAY, работает правильно? Ну нет. Измените белый цвет границы на прозрачный, и теперь вы видите только его родительский черный фоновый цвет.

Теперь, я знаю, что, вероятно, путь с маской, но большую часть времени он не очень хорошо совместимы даже на современном светлячок 42+ или интернет-проводник 10.

Итак, как я сказал, есть гибкий и надежный способ сделать это во многих разных ситуациях (плоский фон, фон изображения, переменная родительская ширина/высота ...)

2016-07-13 EDIT: нашел решение, если у кого-то есть то же самое вопрос, см. мой ответ ниже.

Answer 1

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

Так что я упал на это демо во время поиска решения.

div { 
 
    width: 20%; 
 
    min-width: 13em; 
 
    margin: 1em auto; 
 
} 
 
p { 
 
    font-family: helvetica; 
 
    font-size: 2em; 
 
    font-weight: bold; 
 
} 
 

 
.post-it-note { 
 
    padding: 2em; 
 
    background: #ffd707; 
 
    position: relative; 
 
    min-height: 10em; 
 
} 
 
.post-it-note:after { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -2em; 
 
    left: 0; 
 
    right: 2em; 
 
    border-width: 1em; 
 
    border-style: solid; 
 
    border-color: #ffd707; 
 
} 
 
.post-it-note:before { 
 
    content: ""; 
 
    position: absolute; 
 
    bottom: -2em; 
 
    right: 0; 
 
    border-width: 2em 2em 0 0; 
 
    border-style: solid; 
 
    border-color: #d3b100 transparent transparent; 
 
}

<div class="post-it-note"> 
 
    <p>This folded corner works on any colored background!</p> 
 
</div>

https://codepen.io/jontroutman/pen/ihkvL/

демка за себя, но позвольте мне объяснить. CSS Border не поддерживает процент, но вы можете немного преодолеть эту проблему с em-единицами и абсолютным позиционированием. Вам нужен псевдоэлемент: после развернуть слева направо и: перед псевдоэлементом действовать здесь как стрелка. Оба псевдоэлемента переполняются из родительского поля, что важно для работы «прозрачности».