I'm looking to create something similar to this:
Although I've come across similar issues, none of them fully address my task. Here is an example that I found:
.blue-background {
background-color: blue;
border-radius: 5px;
top: 3em;
left: 230px;
padding: 10px;
font-family: Roboto, sans-serif;
font-size: 14px;
line-height: 22px;
color: #313333;
display: flex;
align-items: center;
width: 260px;
}
.blue-background::after {
content: ' ';
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-left: 37px solid blue;
border-bottom: 25px solid transparent;
border-right: 0px solid transparent;
position: absolute;
top: 43%;
left: 47%;
}
.child-image-wrapper {
max-width: 260px;
margin: auto;
img {
max-width: 260px;
}
}<div class="col-md-4 col-xs-12">
<div class="image-block">
<div class="blue-background">
<h2>Some Text <span class="arrow"></span></h2>
</div>
<div class="child-image-wrapper">
<img src="This is an image" />
</div>
</div>The issue with the CSS above is that it only works at a specific screen size (around 585px), causing the arrow to "detach" from the left div and move into the right div. What I want is for the blue arrow to stay attached to the left div regardless of screen size. Is there a way to achieve this? I apologize for being new to front-end design.