[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%);
}
}
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。