CSS for Line Arrow

Question

純粋なCSSを使用して次の2つのエフェクト（赤色）をどのように達成することができるかについての指針はありますか？

私はコード全体を求めていませんが、誰かが私を適切な方向に導くことができれば、それは本当に素晴らしいでしょう。事前に

感謝。

Answer 1

：所望の値に設定ボーダー半径と後：前と

あなたはこのような何かを試すこと。要素：コンテナと要素の左下に配置する前に、右下の位置に配置する必要があります。各擬似要素の幅も指定する必要があります（例：50％と50％、60％と40％など）。第二の効果について

コード：

.image { 
 
    position: relative; 
 
    width: 350px; 
 
} 
 

 
img { 
 
    display: block; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.image:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: rgba(255, 0, 0, .5); 
 
    width: 30%; 
 
    height: 120px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    border-top-right-radius: 15px; 
 
} 
 

 
.image:after { 
 
    content: ''; 
 
    display: inline-block; 
 
    background: rgba(255, 0, 0, .5); 
 
    width: 70%; 
 
    height: 120px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    border-top-left-radius: 15px; 
 
}

<div class="image"> 
 
    <img src="http://placehold.it/350x350"> 
 
</div>

Answer 2

OK、これは正しい方向の提案です。

2. 下の赤いパネルは、2つの隣接する長方形のように見えます。あなたは適切に幅を設定する必要がありますし、を使用してコーナーの四角形を四捨五入してください。

3. 効果は、それが（一部）、他の1をカバーしていることを確認するために、おそらくz-indexで、赤1 2.エフェクト番号ののように私には見えます、そして白で同じ。

私はすでにあなたを信頼opacityを使用するか、またはrgbaを使用して色を設定することにより、いずれか、赤い半透明を作る方法を知っています。

私は役立つことを願っています。

Answer 3

擬似要素:after & :beforeを使用する必要があります。そうでなければストレートdivになります。あなたがイメージのコンテナ2つの擬似要素のために作成する必要があります第二の効果については

div { 
 
    height: 30px; 
 
    width: 200px; 
 
    background-color: red; 
 
    position: relative; 
 
} 
 

 
div:after { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    width: 0px; 
 
    height: 0; 
 
    border-left: 10px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    border-top: 10px solid #fff; 
 
    margin: auto; 
 
} 
 

 
div:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: -8px; 
 
    width: 0px; 
 
    height: 0; 
 
    border-left: 12px solid transparent; 
 
    border-right: 12px solid transparent; 
 
    border-top: 10px solid red; 
 
    margin: auto; 
 
}

<div></div>

Answer 4

あなたはフィドルが、ガイドとしてのソリューションの下に使用していませんでしたので。 CSSは、希望の結果を得るために一緒に結合するカーブしたエッジを生成します。 CSSの形状のためのより多くの参考のために

div.arrow-curved { 
    width: 120px; 
    height: 80px; 
    background: red; 
    position: relative; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
} 

div.arrow-curved:before { 
    content:""; 
    position: absolute; 
    right: 100%; 
    top: 26px; 
    width: 0; 
    height: 0; 
    border-top: 13px solid transparent; 
    border-right: 26px solid red; 
    border-bottom: 13px solid transparent; 
} 

：before`と `：：丸みを帯びた角と、それを達成するためにわずかなオフセット角でafter`第二の画像で行くhttps://css-tricks.com/examples/ShapesOfCSS/