現在、私は多層の斜めの背景を設計したクライアントのためのwebdesignプロジェクトに取り組んでいます。私はDiagonalを1つ使って解決しました。斜めの背景の構造[CSS]
background-color: #dbebde;
background-image: -webkit-linear-gradient(120deg, #dbebde 50%, #f8f8f8 45%);
min-height: 400px;
ただし、下の図に示すように、左側に小さな対角線を追加する必要があります。この特定の問題を解決する方法について誰かが考えていますか？
私はあなたが2つのdiv要素を使用することをお勧めし、そのうちの一つに透明色でグラデーションを与えます。 HTML：
<div class="outer">
<div class="inner"></div>
</div>
はCSS：
.outer,.inner{
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
.outer {
background-color: #dbebde;
background-image: -webkit-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -moz-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -o-linear-gradient(50deg, red 70%, #f8f8f8 65%);
background-image: -ms-linear-gradient(50deg, red 70%, #f8f8f8 65%);
}
.inner{
background-color: transparent;
background-image: -webkit-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -moz-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -o-linear-gradient(120deg, #dbebde 60%, transparent 55%);
background-image: -ms-linear-gradient(120deg, #dbebde 60%, transparent 55%);
}
あなたがアクションでそれを見ることができます： https://codepen.io/FaridNaderi/pen/LLBVqw
希望少なくとも、それはあなたを助けます。
あなたは、単一HTML要素を使用するのが<div>を言わせて、追加HTML要素を記述することなく、これらの形状を作成するために、pseudo-elements、特に::beforeと::afterを使用することができます。
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}<div class="fullBox diagonalBox"></div>をし、その上に光ミントグリーン1を追加します：
あなたは最初に赤いものを引く
body {
margin: 0;
}
.fullBox {
position: relative;
height: 100vh;
}
.diagonalBox {
background: #FFF;
overflow: hidden;
}
.diagonalBox::before,
.diagonalBox::after {
content: '';
position: absolute;
width: 200%;
height: 200%;
left: 0;
}
.diagonalBox::before {
background: #D00;
top: 10%;
transform: rotate(30deg);
transform-origin: top left;
}
.diagonalBox::after {
background: #DFD;
top: 100%;
transform: rotate(-30deg);
transform-origin: bottom left;
}<div class="fullBox diagonalBox"></div>擬似要素の寸法と位置を調整する必要があることに注意してください。
コードはどこですか？私たちに提供してください –
@Lars誰かがあなたの問題を解決しましたか？もしそうなら、あなたは最高の答えを受け入れてください（ポイントの下にあるチェックマークをクリックしてください）。それはあなたの質問に出くわす他のユーザーがすぐに受け入れられた答えを見つけるのを助け、15人の担当者も与えます。著者に指摘する（： – Danziger