13

尊敬するstackoverflowers、

背景パターンで三角形要素を作成するにはどうすればよいですか?

たとえば、次のような div が必要です。

ここに画像の説明を入力

しかし、私の状態は次のようなものです:

ここに画像の説明を入力

三角形要素を含むすべての例では、その中に img を含めることができない境界線を使用しています ....

これは、coolarrow が必要なサブセクション クラスです。

<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>

.subsection {
  .box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
  background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
  display: block;
  clear: both;
  float: left;
  width: 100%;
  padding-top: 15px;
  padding-bottom: 15px;
  display: none;
}
.subsection {
    position:relative;
}
.subsection:before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    height:20px;
    width:0;
    border-left:20px solid white;
    border-bottom:16px solid transparent;
}
.subsection:after {
    content:'';
    position:absolute;
    top:36px;
    left:0;
    bottom:0;
    width:0;
    border-left:20px solid white;
    border-top:16px solid transparent;
}

そして、私は得ています：

ここに画像の説明を入力

どちらがいいですか...どうすれば必要な形で矢印を一番上に持ってくることができますか? ...そして、ケース div をオーバーレイしますか? ... ありがとう。

4

3 に答える 3

1

http://apps.eky.hk/css-triangle-generator/に移動して生成します:D

また

#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}
于 2013-07-17T14:49:13.077 に答える
1

画像を div の背景として配置し、余白に負の値を入力してバーに重ねます。例 (推定ではありますが、これが機能するとは決して主張しません) は、margin-left: -20px; になります。マージントップ: -20px; そしてそれを行の後に持ってください。

または、@Py の回答を使用すると、この CSS を矢印に使用し、同じ負のマージンを使用して並べることができます。

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; }
于 2013-07-17T14:36:48.357 に答える