CSS Square div，帶有側箭頭

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;
}

這是我所擁有的示例（這不是代碼確切生成的內容）：

如何制作箭頭以及如何制作div沒問題，但是有沒有辦法將它們連接起來並使邊框無縫？ 如：

如果這對於它的價值來說太大了，那么有沒有一種好的方法來制作箭頭，但又可以提供一種適合透明背景圖像的漂亮背景？

謝謝！

Answer 1

嘗試使用這個。

 .arrow{ position: relative; background: #88b7d5; border: 4px solid #c2e1f5; width: 250px; height: 350px; } .arrow:after, .arrow:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow:after { border-color: rgba(136, 183, 213, 0); border-left-color: #88b7d5; border-width: 30px; margin-top: -30px; } .arrow:before { border-color: rgba(194, 225, 245, 0); border-left-color: #c2e1f5; border-width: 36px; margin-top: -36px; } 

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