如何用css製作這個圓形的形狀

-2

我怎樣才能使這個形狀保持裏面的圓形區域透明？如何用css製作這個圓形的形狀

這裏例如什麼我想要實現：http://codepen.io/moradxd/pen/EgVVdg

body { 
 
    background: #16c5de; 
 
} 
 

 
.shape-box { 
 
    width: 80px; 
 
    height: 80px; 
 
    position: relative; 
 
    margin: 100px auto; 
 
} 
 

 
    .element-1, 
 
    .element-2 { 
 
    display: block; 
 
    position: relative; 
 
    } 
 
    
 
    .element-1 { 
 
    width: 80px; 
 
    height: 40px; 
 
    background: #fff; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 0; 
 
    } 
 
    
 
    .element-2 { 
 
    width: 80px; 
 
    height: 80px; 
 
    background: #16c5de; 
 
    z-index: 1; 
 
    border-radius: 100%; 
 
    }

<div class="shape-box"> 
 
    <span class="element-1"></span> 
 
    <span class="element-2"></span> 
 
</div><!-- .shape-box -->

來源

2016-09-09 Morad Hamdy

你有沒有嘗試過這樣做你自己嗎？代碼示例？爲什麼你需要背景透明？你想用文字覆蓋它嗎？ – ryantpayton

是的我試過！我的嘗試是製作2個元素。第一個是80px * 80px的彩色背景。第二個是80px * 40px白色背景的矩形。例如，當我選擇使用背景圖像作爲身體時，我需要透明部分。我需要它透明。這裏的例子http://codepen.io/moradxd/pen/EgVVdg –

@Pete ..我在這個問題中沒有找到相同的想法目的。 –

您可以嘗試:before或:after僞元素和box-shadow，如下圖所示。

body { 
 
    background: #007aff; 
 
    padding: 40px; 
 
    margin: 0; 
 
} 
 
.box { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.box:before { 
 
    box-shadow: 0 0 0 100px #fff; 
 
    position: absolute; 
 
    border-radius: 100%; 
 
    margin-left: -60px; 
 
    height: 200px; 
 
    content: ''; 
 
    width: 120px; 
 
    left: 50%; 
 
    bottom: 0; 
 
}

<div class="box"></div>

來源

2016-09-09 13:25:51

完美答案.. – Komal

不錯的使用盒子影子！ – Pete

@Pete謝謝:) –

如何用css製作這個圓形的形狀

回答

相關問題