84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我想只用 CSS3 來製作一個透明的切出半圓形形狀。唯一的要求是形成形狀的所有元素必須是黑色或透明。
我不能使用上面有一個白色圓圈的黑色矩形,因為半圓必須是透明的並讓背景顯示出來。
所需形狀:
您可以使用盒子陰影來製作透明剪切圓:
body { background: url(http://i.imgur.com/qi5FGET.jpg) no-repeat; background-size: cover; } div { display: inline-block; width: 300px; height: 300px; position: relative; overflow: hidden; } div:before { content: ''; position: absolute; bottom: 50%; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0px 300px 0px 300px #000; } .transparent { opacity: 0.5; }
這可以是具有百分比長度的響應式:
body { background: url(http://lorempixel.com/output/people-q-c-640-480-1.jpg) no-repeat; background-size: cover; } div { width: 40%; height: 300px; position: relative; overflow: hidden; } div:before { content: ''; position: absolute; bottom: 50%; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0px 300px 0px 300px #000; } .transparent { opacity: 0.5; }
也許可以使用 CSS ::after 偽屬性來做到這一點,如下所示:
::after
body { background: green; } .rect { height: 100px; width: 100px; background: rgba(0, 0, 0, 0.5); position: relative; margin-top: 100px; margin-left: 100px; } .circle { display: block; width: 100px; height: 50px; top: -50px; left: 0; overflow: hidden; position: absolute; } .circle::after { content: ''; width: 100px; height: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; background: rgba(0, 0, 0, 0); position: absolute; top: -100px; left: -40px; border: 40px solid rgba(0, 0, 0, 0.5); }
您可以使用盒子陰影來製作透明剪切圓:
這可以是具有百分比長度的響應式:
也許可以使用 CSS
::after
偽屬性來做到這一點,如下所示: