background-color内のアイコンとボーター部分を切り取り、切り取った部分から背景が見えるようにしたい。

前提

background-colorとborderを設定した要素内にアイコンがあります。
サンプル

実現したいこと

下記画像のような仕上がりにしたいです。

サンプルで言うと、赤い円内の緑色の部分を切り取り、切り取った部分から背景が見える状態です。

調べたこと

background-clip: text;というものを見つけました。
background-clip - CSS: カスケーディングスタイルシート | MDN
ですが、background-clip: text;は指定したテキスト部分以外を切り取るプロパティのようです。
実現したいことを実現するには、逆にテキスト部分を切り取る必要があるので、background-clip: text;では実現したいことが実装できなさそうでした。

また、「css 切り取り」「css 切り抜き」などの語句でググりましたが、background-clip: text;に関するページが出てきてしまい、欲しい情報を見つけることができませんでした。

該当のソースコード

css
1html{
2    background-image: url(https://cdn.pixabay.com/photo/2019/09/06/20/25/refuge-4457275_960_720.jpg);
3    background-position: center center;
4    background-repeat: no-repeat;
5    background-attachment: fixed;
6    background-size: cover;
7    height: 100vh;
8    display: flex;
9    justify-content: center;
10    align-items: center;
11}
12
13#box {
14    background-color: red;
15    width: 200px;
16    height: 200px;
17    border: 15px double green;
18    border-radius: 50%;
19    display: flex;
20}
21
22.fa-smile {
23    color: green;
24    font-size: 130px;
25    margin: auto;
26}

html
1<body>
2    <div id="box">
3        <i class="fas fa-smile"></i>
4    </div>
5    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
6</body>

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

回答2件

background-color内のアイコンとボーター部分を切り取り、切り取った部分から背景が見えるようにしたい。

どうしてもその方法でないといけない縛りはありますでしょうか。そうでないなら、

PNGやSVGで背景が透明の画像を作って貼り付ける
<canvas>や<svg>で必要な部分だけ描画する

ような方がやりやすいかと思います（一度敷いてしまった背景を中から削るのは難しいです）。

投稿2019/09/11 04:46

maisumakun

総合スコア145183

ベストアンサー

CSSで対応したい場合は#box::beforeと#box::afterの疑似要素を使ってボーダーを引く方法などはいかがでしょうか。

https://jsfiddle.net/5vpjL9hb/

絵文字を塗りつぶしから線に変更
<i class="fas fa-smile">→<i class="far fa-smile">

HTML
1<body>
2  <div id="box">
3    <i class="far fa-smile"></i>
4  </div>
5  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
6</body>

CSS
1html {
2  background-image: url(https://cdn.pixabay.com/photo/2019/09/06/20/25/refuge-4457275_960_720.jpg);
3  background-position: center center;
4  background-repeat: no-repeat;
5  background-attachment: fixed;
6  background-size: cover;
7  height: 100vh;
8  display: flex;
9  justify-content: center;
10  align-items: center;
11}
12
13body {
14  background: none; /* 背景色が入ってしまうのでnoneを設定 */
15}
16
17#box {
18  position: relative; /* 追加 */
19  width: 170px; /* 内側ボーダーの横幅を調整 */
20  height: 170px; /* 内側ボーダーの縦幅を調整 */
21  border-radius: 50%;
22  display: flex;
23}
24
25#box::before { /* 内側ボーダー用追加要素 */
26  content: '';
27  position: absolute;
28  width: 100%;
29  height: 100%;
30	top: 0;
31	left: 0;
32  border: 25px solid red; /* 内側ボーダーの調整 */
33  border-radius: 50%;
34  box-sizing: border-box;
35}
36
37#box::after { /* 外側ボーダー追加要素 */
38  content: '';
39  position: absolute;
40  width: 114%; /* 外側ボーダーの横幅を調整 */
41  height: 114%; /* 外側ボーダーの縦幅を調整 */
42  top: -7%; /* 縦位置調整 width-100%を2で割った値にする */
43  left: -7%; /* 横位置調整 height-100%を2で割った値にする */
44  border: 6px solid red;
45  border-radius: 50%;
46  box-sizing: border-box;
47}
48
49.fa-smile {
50	color: red; /* 色を変更 */
51  font-size: 130px;
52  margin: auto;
53}