他の要素の上にhtml5、css、\またはブートストラップで「矢」を作成してください。

Question

下の画像には、下端の中央から突き出る矢頭があります。どのように私はそれを作成することができますか？私はそれに赤い四角形のマークをつけました。

example http://funkyimg.com/i/2nBcC.png

緑と白は2つの異なる<section>タグのように見えます。私は何のためにgoogleを把握しているように見えることができない、これはウェブサイトの写真であり、実際のウェブサイトはこれを持っていないので、それを開いてコードを調べることはできない。

Answer 1

使用した擬似要素afterトリックが正しくposition:absolute;との国境にあることについて。

top:100%;とborder-topを:afterに使用すると、divの下に下向きの矢印が追加されます。

bottom:100%;とborder-bottomを:afterに使用すると、divの上部に上向きの矢印が追加されます。

.con:after { 
 
    content:''; 
 
    position: absolute; 
 
    top:100%; 
 
    left: 50%; 
 
    margin-left: -50px; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: solid 50px #e15915; 
 
    border-left: solid 50px transparent; 
 
    border-right: solid 50px transparent; 
 
} 
 
.con{ 
 
    width:100%; 
 
    height:100px; 
 
    background-color:green; 
 
    position:relative; 
 
}

<div class="con"></div>

Answer 2

あなたの要素をposition:relativeにする必要があります。矢印の場合は、position:absoluteを使用する必要があります。したがって、相対的な位置は、その子自体を絶対的な内部に結びつけます。次に矢印を作ってcss-triangle-generatorを使うことができます。矢印用に別の要素を作成する代わりに、before, after pseudo要素を使用できます。

.section{ 
 
    height:250px; 
 
    position:relative; 
 
    background:blue; 
 
    margin-bottom:50px; 
 
} 
 
.section:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: -30px; 
 
    margin: auto; 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 30px 50px 0 50px; 
 
    border-color: blue transparent transparent transparent; 
 

 
}

<div class="section">&nbsp;</div>

Answer 3

これはCSSだ、あなたを助ける必要があります。

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    top: 100%; 
    left: 50%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-top-color: #88b7d5; 
    border-width: 30px; 
    margin-left: -30px; 
} 
.arrow 

_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-top-color: #c2e1f5; 
    border-width: 36px; 
    margin-left: -36px; 
} 

あなたのタグにクラスを設定する必要があり、このような何か：それはどのように動作するか

<div class="arrow_box"> 
      <h1 > Something </h1> 
</div> 

チェックフィドルを表示するには：https://jsfiddle.net/kzvrvbzL/1/

[CSSとアローの境界線]の