css - CSSで流動的な境界線を作成することは可能ですか? 三角形を描いていて、ページの幅 50%、高さ 50% を占めるようにしたいと考えています。

Question

これが三角形を作るために私が使っているものです

#triangle-topright {
   width: 0;
    height: 0;
    border-top: 400px solid white; 
    border-right: 600px solid transparent;
    position:absolute;
    right:0; top:0;
    opacity: 0.24;

}

理想的には、 border-top: 50% height と border-right:50% width が必要ですが、それは存在しません..これを行う方法はありますか? それとも、ベクター三角形の画像を使用して、サイズを 50%、50% に変更したほうがよいでしょうか?

Answer 1

うまく説明できなかったかもしれませんが、CSSを使用して非長方形の形状を作成することはできませんborder。ベクトル三角形または大きな透明なgifが最善の策です。別の方法として、三角形の特殊文字を含むフォントを使用して、フォントサイズを大きくします。