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

前回2つの画像を一つにする方法をこちらで教えていただきました
codepen

今回は4つの画像を一つにしたくご質問させていただきました
自分で書いたソースだと1つを4つにはならず、
分離された形になってしまいます
4つを1つにするにはどうしたらいいでしょうか

<style>
div.icon {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 75px;
}
div.icon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 75px;
  height: 75px;
  background-image: url(https://placehold.jp/3d4070/ffffff/75x150.png);
  background-repeat: no-repeat;
}
div.icon::after {
  content: "";
  position: absolute;
  left: 75px;
  top: 0;
  width: 75px;
  height: 75px;
  background-image: url(https://placehold.jp/943157/ffffff/75x150.png);
  background-repeat: no-repeat;
}

div.icon2 {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 75px;
  transform: rotateX( 180deg );
}
div.icon2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 75px;
  height: 75px;
  background-image: url(https://placehold.jp/3d4070/ffffff/75x150.png);
  background-repeat: no-repeat;
}
div.icon2::after {
  content: "";
  position: absolute;
  left: 75px;
  top: 0;
  width: 75px;
  height: 75px;
  background-image: url(https://placehold.jp/943157/ffffff/75x150.png);
  background-repeat: no-repeat;
}
</style>

<h1>画像を半分ずつ表示した円形アイコン</h1>
<div class="icon">
  
</div>
<div class="icon2">
  
</div>

yambejp

2021/05/25 00:40

svgでまとめれば良いような気がしますがどういった画像から結果としてどういうデータをほしいのか手書きでいいので例示されたほうがよいかと

m.ts10806

2021/05/25 00:48

>CSSに詳しい方質問タグにつけてる時点で「興味がある人」「それなりに自信がある人」が見るし、質問要件と関係ないので毎回のようにつける必要ないです。

m.ts10806

2021/05/25 00:49

それに理屈がわかっていればいくつになっても同じでは。前の質問の回答の理解度を確かめてください

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

回答2件

たとえば。

css
1div.icon {
2  position: relative;
3  width: 150px;
4  height: 150px;
5  overflow: hidden;
6  border-radius: 75px;
7  background-image: url(https://placehold.jp/3d4000/ffffff/75x150.png),
8    url(https://placehold.jp/943100/ffffff/75x150.png), url(https://placehold.jp/3d4070/ffffff/75x150.png),
9    url(https://placehold.jp/943157/ffffff/75x150.png);
10  background-position: bottom 75px right 75px, bottom 75px left 75px, top 75px right 75px, top 75px left 75px;
11  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
12}

投稿2021/05/25 00:56

Lhankor_Mhy

総合スコア36158

bvaz

2021/05/25 01:27 編集

こんな書き方があったんですね画像の見える範囲はいじれないでしょうか background-size:50 50%,50% 50%,50% 50%,50% 50%; としても background-size:contain,contain,contain,contain; としても変化がありませんでした