CSS 円形ホローイングの実装（クーポン背景画像）

.hollow-compose-three-circles {
  幅: 300ピクセル;
  高さ: 100px;
  位置: 相対的;
  背景: 放射状グラデーション(右上の円、透明 10px、#00adb5 0) 左上 / 60px 51% 繰り返しなし、
    放射状グラデーション(右下の円、透明 10px、#00adb5 0) 左下 /60px 51% 繰り返しなし、
    放射状グラデーション(左上の円、透明 10px、#eeeeee 0) 60px 0/230px 51% 繰り返しなし、
    放射状グラデーション(左下の円、透明10px、#eeeeee 0) 60px 50px /230px 51% 繰り返しなし、
    放射状グラデーション(10px 50pxの円、透明10px、#eeeeee 0) 290px 0/10px 100px 繰り返しなし;
   フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));
}

.hollow-compose-three-circles::after {
  コンテンツ： '';
  高さ: 80px;
  境界線: 1px 破線 #fff;
  位置: 絶対;
  左: 60px;
  上: 0;
  下部: 0;
  マージン: 自動;
}
<div class="hollow-compose-three-circles"></div>

<!doctypehtml>
<ヘッド>
<メタ文字セット="UTF-8">
<title>プロセス</title>
<スタイル>
	体{
		背景: グレー;
	}
   .many-circles {
      マージン: 10px 0 0 40px;
	    幅: 200ピクセル;
	    高さ: 100px;
	   背景: 放射状グラデーション(右の円、透明 10px、#00adb5 0) 右上 / 51% 60px 繰り返しなし、
	    放射状グラデーション(左の円、透明 10px、#00adb5 0) 左上 / 51% 60px 繰り返しなし;
	    /*radial-gradient(右上の円、透明 10px、#eeeeee 0) 右下 / 51% 40px 繰り返しなし、
	    放射状グラデーション(左上に円、透明 10px、#eeeeee 0) 左下 / 51% 40px no-repeat;*/
	   フィルター: ドロップシャドウ(2px 2px 2px rgba(0,0,0,.2));
}

</スタイル>
</head>
<本文>
	
 <div data-v-85036100="" class="many-circles"></div>
<スクリプト>
</スクリプト>
</本文>
</html>

<スタイル>
	体{
		背景: グレー;
	}
	
   .hollow-one-circle{
		表示: インラインブロック;
	  幅: 246ピクセル;
	  高さ: 218px;
	  位置: 相対的;
	  背景: 放射状グラデーション(0 106px の円、透明 10px、#FF4654 0) 左上/246px 100% 繰り返しなし;  
	}
	.hollow-one-right{
		表示: インラインブロック;
		幅: 718ピクセル;
		  高さ: 218px;
		  位置: 相対的;
		背景: 放射状グラデーション(718px×106pxの円、透明10px、#ffffff 0) 左上/718px 100% 繰り返しなし;
		
ボックスの影:3px 0px 13px 0px rgba(0,0,0,0.03);
	}

.hollow-one-circle::before {
  コンテンツ： '';
  位置: 絶対;
  高さ: 100%;
  幅:5px;
  上: 4px;
  左: 246ピクセル;
  背景画像: 線形グラデーション(下へ、#FF4654 5px、透明 5px、透明)、
  放射状グラデーション(5px 10px の円、透明 5px、#FF4654 5px);
  背景サイズ: 5px 15px;
}
.hollow-one-circle:after {
  
}
</スタイル>
<div data-v-85036100="" class="hollow-one-circle"></div>
<div data-v-85036100="" class="hollow-one-right"></div>