html
1<body> 2<div id="huga"> 3<div id="piyo"> 4<body>
css
1#huga{ 2 width:10px; 3 height:10px; 4 background-color:????/*whiteにすると背景色が変わった時に対応できない。*/ 5} 6#piyo{ 7 width:20px; 8 height:20px; 9 background-color:blue 10} 11 12#
huga背景色と同じ色にすることも考えましたが、グラーデーションにしたとき底の部分だけ不自然になりそうなので却下しました。
本質問と直接は関係ありませんが background-color="blue" では指定は効かないのではないでしょうか。
すみません、修正しておきました。(まだ間違いがあったら伝えていただけると嬉しいです)
確認したい対象のブラウザなんかもあれば、入れてもらったほうがいいかもしれません。
CSSでの「切り抜き」はブラウザが限られますので、body背景色にグラデーションを入れるのであれば、要素を2個の矩形の組合せで表示するのが、無難ではないでしょうか?
実際はもう少し複雑な図形なので、「透明化する」というようなのが楽なのです。(下の方のclip-pathがブラウザを考えなければぴったしでした!)
clip-pathは魅力的なのですがね・・・切り抜きが出来ない以上、複雑な形状であれば、画像が現時点では簡単でしょうね。
回答3件
あなたの回答
tips
プレビュー