CSS Square div，带有侧箭头

Question

I've got a div that houses an image. This image shows only when an element is hovered over, and therefore I'd like a side arrow to come out of the div pointing to the side (in the direction of the element hovered).

This code generates the square 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;
}

Here's an example of what I have (this is not what the code generates exactly):

How to make an arrow and how to make the div is no issue, but is there a way to connect them and have the borders seamless? Such as:

If this is too much for what it's worth, is there a good way to have the arrow but also a nice background that caters to transparent background images?

Thanks!

Answer 1

Try using this.

 .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>