我想只用 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
偽屬性來做到這一點,如下所示: