風変わりなCSSにおける応答ヘッダー

今日我々は超クール応答ヘッダーを作成するTailwind CSS .
このヘッダには、次の要素があります.

✅ テキストの左側

✅ 画像の右側

✅ 斜め線と不透明度ラインを分割する

✅ いいえ、カスタムCSSが必要です!

結果は、この超クール応答ヘッダーです.

CSS対応ヘッダー

我々は、我々自身を書いていませんCSS , 我々はこのフルヘッダーを使用してビルドするので、私と負担HTML テール風クラスを持つ要素
メインラッパーを構築することによって起動します.

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500"></div>

我々は、このラッパーに高さを与えますh-64 クラス、コーナーを曲がってください.次に、我々はまた、クールな藍色の色合いにします.
ご覧のように、このラッパーは相対的です.
これは、いくつかの絶対divsを互いの上に位置要素に使う必要があるからです.
これにより次の結果が得られます.

今、我々はイメージを最初に右に置きたいです.

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500">
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
      src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

ご覧の通り、我々はコンテナの中に絶対的なdivを置きます.このdivは親の右に設定されます.
また、幅の9/12であり、完全な高さを使用してください.
divの内部は実際のイメージです.
我々は、それはフルフィットを使用するだけでなく、オブジェクトフィットメソッドを使用する必要があります状態.
これまでの結果

すでにかなりクールな結果が、今我々はコンテンツのための左側と偶数クーラー対角線を作る必要があります.

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500">
  <div class="absolute z-30 flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
  </div>
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
      src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

私たちはもう一つの絶対的なdivを加えます.そして、それは完全な幅と高さを使用します.
私たちは、いくつかのパディングとテキスト分割のサイズを定義した相対的なdiv内部を置きます.
そこには見出しのテキストは、何も空想だけで大胆なフォントがあります.
我々が現在これを描くならば、それは少し奇妙に見えます、テキストはイメージの半分です、そして、それはちょうど奇妙な探しです.

今、我々はこの対角線を加える方法を見つけなければならなくて、テキストの後でより多くのインディゴを持っていなければなりません.

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500">
  <div class="absolute z-30 flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
    <div class="absolute top-0 right-0 flex w-full h-full">
      <div class="w-1/3 h-full bg-indigo-500"></div>
    </div>
  </div>
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
      src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

ここでは別の絶対的なdivを追加しました.今のところ、インディゴ色の内側に1/3幅の要素を追加しました.
あなたが見ることができるように、それはまだ完全にテキストをカバーしていません.
それは、我々の形が最終的なストレッチをするからです.

として、今では、図形を追加するにはSVG's with a polygon inside .

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500">
  <div class="absolute z-30 flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
    <div class="absolute top-0 right-0 flex w-full h-full">
      <div class="w-1/3 h-full bg-indigo-500"></div>
      <div class="relative w-1/3">
        <svg
          fill="currentColor"
          viewBox="0 0 100 100"
          class="absolute inset-y-0 z-20 h-full text-red-500"
        >
          <polygon id="diagonal" points="0,0 100,0 50,100 0,100"></polygon>
        </svg>
      </div>
    </div>
  </div>
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
      src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

私たちは別の1/3列を追加しましたが、現在は相対的です.内部ではポリゴンを含むSVGを見ることができます.
あなたはテキストクラスを使用して、これらのSVGの色を変更することができますデモのために今私はこのテキストを赤にしたので、何が追加されて見ることができます.

かなりクール右!
さて、図形を終了し、SVGの最後のコピーを追加してみましょう.

<div class="relative h-64 m-8 overflow-hidden rounded-lg bg-indigo-500">
  <div class="absolute z-30 flex w-full h-full">
    <div class="relative z-30 w-5/6 px-6 py-8 text-white md:py-10 md:w-1/2">
      <h2 class="text-5xl">Tailwind responsive header</h2>
      <span></span>
    </div>
    <div class="absolute top-0 right-0 flex w-full h-full">
      <div class="w-1/3 h-full bg-indigo-500"></div>
      <div class="relative w-1/3">
        <svg
          fill="currentColor"
          viewBox="0 0 100 100"
          class="absolute inset-y-0 z-20 h-full text-indigo-500"
        >
          <polygon id="diagonal" points="0,0 100,0 50,100 0,100"></polygon>
        </svg>
        <svg
          fill="currentColor"
          viewBox="0 0 100 100"
          class="absolute inset-y-0 z-10 h-full ml-6 text-white opacity-50"
        >
          <polygon points="0,0 100,0 50,100 0,100"></polygon>
        </svg>
      </div>
    </div>
  </div>
  <div class="absolute top-0 right-0 block w-9/12 h-full">
    <img
      alt="Snowy mountain lake"
      class="object-cover min-w-full h-full"
      src="https://images.unsplash.com/photo-1607025952930-da2ac6748e7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80"
    />
  </div>
</div>

そこで私たちは別のSVGを加えましたml-6 これはマージンを残します.
また、50 %不透明度を作るためにopacity - 50を追加します.
これも最終的なコードです.
私は、このcodepenでプレーして、スタッキング形式を見るためにクラスを点検するようにあなたに挑戦します.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、接続してくださいFacebook or