あなたはどのようにhtml/CSSの透明な円の中の四角形のdivを埋めると思いますか？

Question

かなり珍しいデザインのブロックのhtml/CSSを作成するタスクがあります：enter image description here

アイデアはありますか？ここで

は私のコードです： が、影の画像は、FF :(

<section class="service-block"> 
      <div class="container"> 
       <div class="row"> 
        <div class="item"> 
         <object data="" type=""> 
         <svg viewbox="-7 -1 24 19" style="background-image: url('/img/ic_advantages-1_calc.png')"> 
          <path d="M-10 -1 H30 V18 H-10z M 5 8 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0z"/> 
          <image x="0" y="0" xlink:href="/img/circle_shadow.png" ></image> 
         </svg> 
         </object> 

         <div class="info"> 
          <div class="title"><a href="">Some link</a></div> 
          <div class="price">from 3 000 <span class="rub">₽</span>per year</div> 
          <div class="inluded"><a href="">Go?</a></div> 
         </div> 
        </div> 

       </div> 
      </div> 
     </section> 

Answer 1

ここ

私は1つのdivと...それを行うだろう方法です

には表示されません。半径方向の勾配およびドロップシャドウ。

body { 
 
    background: #c0ffee; 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 250px; 
 
    margin: 1em auto; 
 
    background: radial-gradient(circle at center 75px, transparent, transparent 50px, red 50px); 
 
    -webkit-filter: drop-shadow(0px -4px 4px black); 
 
-  filter: drop-shadow(0px -4px 4px black); 
 
    overflow: hidden; 
 
}

<div></div>

巨大な箱-shadow..andドロップシャドウと

OR

擬似要素

body { 
 
    background-color: #c0ffee; 
 
} 
 
div { 
 
    width: 200px; 
 
    height: 250px; 
 
    margin: 1em auto; 
 
    -webkit-filter: drop-shadow(0px -4px 4px black); 
 
    filter: drop-shadow(0px -4px 4px black); 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
div:after { 
 
    position: absolute; 
 
    content: ''; 
 
    width: 100px; 
 
    height: 100px; 
 
    box-shadow: 0 0 0 1000px red; 
 
    border-radius: 50%; 
 
    left: 50px; 
 
    top: 35px; 
 
}

<div></div>

Answer 2

位置に子要素の角を丸める方法：相対的。さらに、シャドウを持つ2つのブロックがある場合は、次のように重複します。https://yadi.sk/i/1lXwqKTatpvue