Maison > Questions et réponses > le corps du texte
Je souhaite créer une forme de demi-cercle découpée et transparente en utilisant uniquement CSS3. La seule exigence est que tous les éléments qui forment la forme doivent être noirs ou transparents .
Je ne peux pas utiliser un rectangle noir avec un cercle blanc dessus car le demi-cercle doit être transparent et laisser transparaître l'arrière-plan.
Forme requise :
P粉1388714852023-10-23 14:34:32
Vous pouvez utiliser l'ombre de la boîte pour créer un cercle de détourage transparent :
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; }
Cela peut être responsive avec une longueur en pourcentage :
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; }
P粉8514014752023-10-23 09:09:07
Peut-être pouvez-vous le faire en utilisant des pseudo-propriétés CSS ::after
comme celle-ci :
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); }