ですから、背景として自分のページに三角形を入れたいのですが、画像なしでやりたいと思います。で:before要素を使用してみました<aside>
が、jqueryアクセスが必要なため、脇にあるdiv(.triangle)に置き換えました。デスクトップでは、斜めのエッジがギザギザになっていますが、問題ないように見えました。以下のコードとスナップショットはこちら。
.triangle
{
position: absolute;
top: 0; right: 0;
z-index: -1;
width: 0; height: 0;
border: solid transparent;
border-top-color: #CDC7D2;
border-left-color: #CDC7D2;
}
「border-width:3000px;」を使用してみましたが、要素はかなりのスクロールを占め始めました(明らかに)。
次に、CSS3グラデーションを使用してみましたが、それは機能しましたが、カラーストップトランジションは私の電話(iPhone 4)ではハードではなくぼやけていたので、何かが足りない場合を除いて、それも行き止まりです。以下のコードとスナップショットはこちら。
body
{
background-image: -webkit-linear-gradient(315deg, #CDC7D2 50%, #FFFFFF 50%);
-webkit-background-size: 100% 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
かなり大きな画像を使用するのは簡単な修正ですが、これをコーディングしようとしているときに何かを見逃していないかどうかを確認したいと思います。