平行四辺形のレイアウト効果を実現するCSS

下の図に示す平行四辺形のレイアウト効果を実現するにはどうすればよいですか？

平行四辺形効果の概略スクリーンショット

1つは、skewXの制限です。

言及平行四辺形は、CSSを考える反射のよう transformにskew()/ skewX()/skewY()それによって平行四辺形の効果を達成する、面取り要素を可能にする方法、例えば平行四辺形入力ボックスの結果を以下に示します：

HTMLは次のとおりです。

<div class = "input-x"> 
    <input class = "input" placeholder = "您的姓名"> 
</ div>

CSSは次のとおりです。形状のキーは、以下で赤で強調表示されていますtransform:skewX(-10deg)。

.input-x {
    表示：インラインブロック; 
    位置：相対; 
    z-index：0; 
} 
.input-x :: before { 
    content： ''; 
    位置：絶対; 
    左：0; 上：0; 右：0; 下：0; 
    ボーダー：2px実線#ddd; 
    背景色：#fff; 
    border-radius：4px; 
    変換：skewX（-10deg）; 
    z-index：-1;    
} 
.input {
    表示：ブロック; 
    パディング：8px 10px; 
    ボーダー：0; 背景：なし; 
}

ここをクリックしてください：CSS平行四辺形入力ボックスのデモ

ただし、初期レイアウトでは、背後の白い背景が平行四辺形を形成するだけでなく、テキストコンテンツ全体も平行四辺形の形式に従って植字されました。テキストコンテンツも適用されるとskewX、以下に示すように、すべてのテキストコンテンツが斜めに表示されます。：

私はテキストの一部です。変換属性にskewXを適用して、現在のパフォーマンスを確認しました...

私たちの期待は、テキストがこのように傾くのではなく、直立して表示されることです。私たちの最初の反応は、内部のテキストを逆にすることかもしれませんskewXが、それはテキストの各行の別々の処理、または各文字の別々の処理を必要とし、それは費用がかかり非現実的です。

これがskewX方法の限界です。平行四辺形のレイアウト効果を実現する方法は他にありますか？はい、CSSシェイプレイアウトで実現できます。

2、CSSシェイプのレイアウトと三角形

CSS Shapesレイアウトの完全なチュートリアルについては、以前に書いた記事「自分用のCSSShapesレイアウトチュートリアル」を参照してください。

ただし、CSS ShapesレイアウトのすべてのCSSプロパティに精通している場合でも、少し逆の考え方が必要なため、ここでは平行四辺形のレイアウト効果を実現できない場合があります。

平行四辺形のレイアウトを実現するためのCSSシェイプの鍵は、平行四辺形自体ではなく、左上隅と右下隅にある2つの三角形です。

ここをクリックしてください：平行四辺形レイアウトのデモを実現するためのCSSシェイプ

HTMLの構造は次のとおりです。

<！-左三角-> 
<div class = "shape-left"> </ div> 
<！-右三角-> 
<div class = "shape-right"> </ div> 
<content class = "content"> 
   ...コンテンツ... 
</ content>

レイアウトボックスをチェックすると、手がかりがわかります。

左のボックス右ボックス

.shape-left左側のフローティング要素は同時にshape-outside逆三角形に設定され、.shape-right右側のフローティング要素は同時にshape-outside正の三角形に設定されます。このとき、<content>要素のテキストコンテンツは、残りのスペースに自動的に設定されて形成されます。平行四辺形のレイアウト効果。

関連するCSSコードは次のとおりです。

.shape-left { 
    float：左; 
    幅：200px; 高さ：500px; 
    / *倒三角* / 
    shape-outside：polygon（0 0、100 ％0、0％100％）; 
} 
.shape-right { 
    float：right; 
    幅：200px; 高さ：500px; 
    / *正三角* / 
    shape-outside：polygon（100％0、100 ％100％、0 100％）; 
} 
.content {
    表示：ブロック; 
}

効果が得られます。

実装コードは非常に単純で、重要なのはアイデアです。

3.平行四辺形のレイアウトと実際の戦闘

不規則な形の広告は、ユーザーの注意を引き付ける可能性が高く、それによって広告のクリック率が向上します。

したがって、平行四辺形のレイアウトでは、左上隅と右下隅の三角形の空室を使用して、スペースを最大限に活用するだけでなく、収益も高い2つの三角形の広告を配置できます。

フロントエンドの開発は、通常、会社の事業収益に直接関係していませんが、ここでは異なります。会社の収益を大幅に増やすことができる新しいレイアウト効果を達成した場合、それはこの分野でのあなたの価値を証明し、それは非常にパフォーマンスにとって重要です。はい、プロジェクトで試すことができます。

ただし、実際の開発では、表示されるテキストの内容が多かれ少なかれ、平行四辺形にすることは、三角形が非常に小さくなるか、右下隅の三角形の位置を特定できないため、適切ではありません。推奨レイアウト形状は以下のようになります。

実際のプロジェクトの信頼できるレイアウト

第四に、結論

将来、不規則な形状のレイアウトに遭遇した場合は、CSS形状のレイアウトのような条件付きの反射が必要です。

CSS Shapesレイアウトの互換性はすでにかなり良好であり、モバイル端末は自信を持って使用できます。非常に少数の古い携帯電話の汚染を避けるために、次のように対処できます。

@supports（shape-outside：none）{ 
   / * CSSShapes関連のコードはここに記述されています* / 
}

このように、古い携帯電話は従来のブロックレイアウトでうまくレイアウトされており、ほとんどの携帯電話は新しいレイアウトの美味しさを楽しむことができます。

上〜読んでくれてありがとう！