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>

イェーイどうなるかありますか？うーん、ダメ。白の境界線の色を透明に変更すると、その親の黒の背景色のみが表示されます。

は今、私はそこに道がマスクで、おそらくですが、それは10

だから私が言ったようにもFirefoxの42+現代やInternet Explorer上で非常によく対応していませんほとんどの時間は、知っていますそこに多くの異なった状況でそれを行うための任意の柔軟かつ信頼性の高い方法（フラットバックグラウンド、画像、背景、変数親幅/高さ...）

2016年7月13日編集：誰かが同じ持っている場合は解決策を見つけました質問、以下の私の答えを見る。

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単位と絶対位置指定でこの問題をいくらか乗り越えることができます。擬似要素が必要です。左から右に展開するにはafterを使用し、：before擬似要素はここで矢印として動作します。どちらの擬似要素も親ボックスからあふれています。これは '透明性'が重要です。