私のサイトのほとんどのdiv要素の右上隅を切り取ろうとしています。これらのdivはすべて異なるサイズです。私はこれを行うための反応的な方法を見つけようとしています。私はここでこのサイトに行きました:http://bennettfeely.com/clippy/あなたはカスタムポリゴンの形状を切り取ることができます。ここでdivで45度の角度をカット
は、私がこれまで持っているものです。
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/
私はそれが0%100%が左下、100%100%が右下などであると信じています.45%度の角度に変換する方法は不明です。これは数学的な質問かどうか分からないのですか? –
divの背景が単色で表示されていますか? – Shaggy
@Shaggy必ずしもそうではありません、それらのいくつかは、背景画像になるでしょう。それで、これをやるのはやや難しかったのです。 –