將箭頭從一個 div go 插入另一個

Question

我需要實現這樣的目標：

表示

我發現了類似的問題，但它們並沒有完全涵蓋我的任務。 這是我發現的一個例子：

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

現在上述 CSS 的問題在於，這只適用於特定的屏幕尺寸（如 585px 左右），否則箭頭會從左側 div 中“分離”並進入右側 div。 我需要的是即使屏幕尺寸發生變化，藍色箭頭也能粘在左邊的 div 上。 是否有可能以某種方式實現這一目標？ 對不起，我對前端設計很陌生

Answer 1

你可以這樣做：

 .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

我鼓勵您閱讀有關position屬性的更多信息（在我們的例子中，特別是absolute和relative ）。 在這里你可以找到一些介紹。

根據您的問題，更改.blue-background::after中的top和left屬性，以根據需要將 position 用於箭頭。

這是一個例子： https://jsfiddle.net/qa9un7fy/