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>