CSSに詳しい方 2つの画像を1つに見せる

前提・実現したいこと

2枚の画像を1つに見せる方法がわかりません
CSSをつかうと思うんですが画像のような表示にしたいです
画像では左右で半分半分の表示で1枚のように表現されてます
詳しい方教えて下さい

行動規範の内容に同意します

回答1件

ベストアンサー

一例としては、こんな感じでしょうか。

scss
1div.icon{
2  position: relative; // before,afterの位置決めに必要
3  width: 150px;  //正方形
4  height: 150px;
5  overflow: hidden;  // 画像がはみ出した部分は描画しない
6  border-radius: 75px;  // border-radiusを高さの半分に設定すると境界が円形になる
7  &::before{
8    // 左側の画像
9    content: "";
10    position: absolute;
11    left: 0;
12    top: 0;
13    width: 75px;
14    height: 150px;
15    background-image: url(https://placehold.jp/3d4070/ffffff/75x150.png);
16    background-repeat: no-repeat;
17  }
18  &::after{
19    // 右側の画像
20    content: "";
21    position: absolute;
22    left: 75px; // left,topで位置決め
23    top: 0;
24    width: 75px;
25    height: 150px;
26    background-image:url(https://placehold.jp/943157/ffffff/75x150.png);
27    background-repeat: no-repeat;
28  }
29}