将箭头从一个 div go 插入另一个

Question

I need to achieve something like this:

representation

I have found similar issues but they do not completely cover my task. Here is an example of a thing I have 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>

Now the problem with the above CSS is that this works only at particular screen size (like 585px or so) otherwise the arrow "detaches" from the left div and goes into the right div. What I need is for the blue arrow to be stuck to the left div even if the screen size changes. Would it be possible to achieve this in some way? Sorry I am pretty new to front-end design

Answer 1

You can do it like so:

 .wrapper { width: 10em; height: 2em; /* Height needs to match.right::after height and width */ display: flex; }.left { background-color: lightblue; width: 50%; }.right { background-color: lightpink; border-left: 1px solid purple; width: 50%; position: relative; overflow: hidden; }.right:before { height: 2em; /* Match height above*/ width: 2em; /* Match height above*/ background-color: #b77681; position: absolute; top: 50%; left: 0%; content: ""; border: 1px solid #864954; transform: translate(-73%, -50%) rotate(45deg); }

 <div class='wrapper'> <div class='left'> </div> <div class='right'> </div> </div>

Answer 2

I encourage you to read more about the position property (in our case specifically absolute and relative ). here you can find some introduction.

As per your question change the top and left properties in .blue-background::after to fit the position for the arrow as you want.

here is an example: https://jsfiddle.net/qa9un7fy/