divで45度の角度をカット

Question

私のサイトのほとんどのdiv要素の右上隅を切り取ろうとしています。これらのdivはすべて異なるサイズです。私はこれを行うための反応的な方法を見つけようとしています。私はここでこのサイトに行きました：http://bennettfeely.com/clippy/あなたはカスタムポリゴンの形状を切り取ることができます。ここで

は、私がこれまで持っているものです。

div { 
 
\t width: 280px; 
 
\t height: 280px; 
 
\t background: #1e90ff; 
 
\t -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
clip-path: polygon(0% 100%, 100% 100%, 100% 9%, 89% 0%, 0% 0%); 
 
} 
 

 
/* Center the demo */ 
 
html, body { height: 100%; } 
 
body { 
 
    background-image: url('http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg'); 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
}

<div></div>

私の質問は、私はこれらの切り抜きを読み、カットオフ完璧な45度の角度を作る方法を見つけようとしているあります右上隅。現在のところ、このポリゴンは私によって自由に作成されました。そして、右上から45度の角度で完全にカットするためには、どのパーセンテージを使用する必要があるかを見極めようとしています。

解決策では、ほとんどのdiv、ボタン、画像にカットオフを追加します。

border-leftとrightの絶対位置を使用してスタックオーバーフローでこれを行う他の方法が見つかりましたが、問題の背景にはバックグラウンドイメージがあるため、div cutoffを透明にする必要があります。ここで

がセットアップされたものJSフィドルです：https://jsfiddle.net/xyvz5z8m/1/

Answer 1

あなたが代わりにパーセントの、からクリップする位置を動作するように、CSSのCALCを使用することにより、正確な45度のクリップを行うことができるはず。例えば

-webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #1e90ff; 
 
    -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    clip-path: polygon(0% 100%, 100% 100%, 100% 30px, calc(100% - 30px) 0%, 0% 0%); 
 
    
 
    /* Resizing this div just to show that this will remain at 45 degrees */ 
 
    animation: resize 5s infinite; 
 
} 
 

 
html, body { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    background: #ededed; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
@keyframes resize { 
 
    0%  { width: 100px; height: 100px; } 
 
    25% { width: 50px; height: 100px; } 
 
    50% { width: 50px; height: 50px; } 
 
    75% { width: 150px; height: 50px; } 
 
    100% { width: 100px; height: 100px; } 
 
}

<div></div>

キー部分は裸も、我々は、素子の奥側から正確な位置を取得するためにクリッピング領域の位置決めのためのピクセルサイズを使用し、calc(100% - 30px)ことですこれはブラウザのサポートが非常に限られていることを念頭に置いて