ミギムキ

[CSS] 矢印を付けて画像を並べたビフォーアフターなスタイル

画像を横並びにして矢印をつけた図

サンプルコード

html

<div class="before_after"> <div class="before_after_image"> <img src="before.jpg" alt=""> </div> <div class="before_after_arrow"></div> <div class="before_after_image"> <img src="after.jpg" alt=""> </div> </div>
スポンサー広告

CSS

.before_after_image > img { margin: 0px auto; max-width: 100%; } .before_after_arrow { position: relative; width: 60px; height: 60px; color: #3388dd; } .before_after_arrow:before, .before_after_arrow:after { position: absolute; top: 50%; transform: translateY(-50%); content: ""; } .before_after_arrow:before { right: -50px; width: 0px; height: 0px; border: 40px solid transparent; border-left: 50px solid currentColor; } .before_after_arrow:after { left: -10px; width: 40px; height: 40px; background-color: currentColor; } @media screen and (max-width: 767px) { .before_after_arrow { margin: 30px auto; transform: rotate(90deg); } } @media print, (min-width: 768px) { .before_after { display: flex; justify-content: space-between; position: relative; } .before_after_image { width: calc(50% - 60px); } .before_after_arrow { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } }