CSSの方角の矢印

Question

私は画像を収めているdivを持っています。この画像は、要素が上にホバリングされた場合にのみ表示されるため、サイド矢印を要素の方向に向けるdivから出てきたいと思います。

このコードは、正方形のdiv要素を生成します。

<div id="image-thumbnail-container"> 
    <img id="image-thumbnail" class="arrow-right"> 
    <div class="triangle"></div> 
</div> 

CSS：

#image-thumbnail-container { 
    display: block, 
    position: fixed, 
    padding: 4px, 
    border-radius: 5px, 
} 

#image-thumbnail { 
    display: block, 
    position: fixed, 
    border: 1px solid #000, 
    padding: 4px, 
    border-radius: 5px, 
} 

.triangle { 
    width: 0; 
    height: 0; 
    border-style: solid; 
    border-width: 10px 0 10px 17.3px; 
    border-color: transparent transparent transparent #ff0055; 
} 

ここで私は（これはコードを正確に生成するものではありません）持っているものの例です：

矢印を作成する方法とdiを作成する方法vは問題ありませんが、それらを接続して境界をシームレスにする方法がありますか？以下のような：

これは、それは価値がある何のために多すぎると、矢印だけでなく、透明の背景画像に食料調達素敵なバックグラウンドを持っているための良い方法はありますか？

ありがとうございます！

Answer 1

これを試してみてください。

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

 
.arrow:after { 
 
\t border-color: rgba(136, 183, 213, 0); 
 
\t border-left-color: #88b7d5; 
 
\t border-width: 30px; 
 
\t margin-top: -30px; 
 
} 
 
.arrow:before { 
 
\t border-color: rgba(194, 225, 245, 0); 
 
\t border-left-color: #c2e1f5; 
 
\t border-width: 36px; 
 
\t margin-top: -36px; 
 
}

<div class="arrow"></div>