3

正直なところ、これをどこから始めればよいかわかりません (私は HTML/CSS をもう少し深く掘り下げているグラフィックデザイナーですが、現在の経験はかなり貧弱なので、この問題は現時点では私の能力を超えています):

私の最新のサイト デザインの一部では、サイトのセクションを縞模様で分割しました。セクションは、標準のページ背景と 10% の黒の透過性オーバーレイを交互に適用し、次のセクションを区別するのに役立ちます。

問題は、すべての新しいセクションには、次のように、上の暗い (または明るい) 陰から切り取られた 3 つの中央の矢印のブロックがあることになっていることです。

ここに画像の説明を入力

これを画像で管理する方法は知っていますが、背景は繰り返しパターンであるため、その解決策は実際には機能しません。

この問題の解決に役立つアドバイスやヒントはありますか? 基本的に、すべての明るいセクションは 10% の黒の透明度の 3 つの矢印で始まる必要があり、すべての暗いセクションは 10% の透明度の背景から切り取られた 3 つの矢印で始まる必要があります。

これを行う HTML/CSS ベースの方法はありますか?

4

2 に答える 2

3

上縁が台形のコンテナ

台形:
疑似要素::beforeを使用して、目的の境界線を上部に追加します。
コンテナーのサイズを取得するこの方法で、このコンテンツをブロックとして表示することを選択します。
コンテナー内に表示されないように、この要素を相対的に配置しました。position:relative;&top: -30px;
境界線は静的な 30 ピクセルを取得したため、-30 ピクセル高く表示され、.cut-out のちょうど上に表示されます。

透明度: rgba() で色を設定すると、色の不透明度を設定できます。
rgba(0,0,0, 0.1) は、コンテナ/台形の不透明度を 10% に設定します。最後の値 1 は 100% の不透明度に相当します。(代わりにrgb()を使用する場所)

body {
  margin: 0;
}
main {
  background-color: rgba(0, 0, 0, 0.1);
}
.cut-out {
  display: inline-block;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
  width: 100px;
  height: 150px;
  margin: 40px 0 0 0;
}
.cut-out::before {
  content: "";
  border-bottom: 30px solid rgba(0, 0, 0, 0.1);
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  display: block;
  position: relative;
  top: -30px;
}
.stop {
  clear: both;
}
<main>
<div class="cut-out">Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:150px;">Lorem ipsum dollar si amet, </div><!--
--><div class="cut-out" style="width:250px;"></div><!--
--><div class="cut-out"></div>
  <div class="stop"></div>
</main>

于 2015-05-04T07:38:42.813 に答える