How to Create a Transparent Circle with a Border-Radius in CSS?-CSS Tutorial-php.cn

How to Create a Transparent Circle with a Border-Radius in CSS?

Linda Hamilton

Release： 2024-10-25 06:09:02

Original

803 people have browsed it

How to Create a Transparent Circle with a Border-Radius in CSS?

Animating a Circle with Transparent Background and Border-Radius in CSS

You're attempting to draw a circle with a border-radius, but you're facing difficulty in overlaying elements while keeping the circle's background transparent. This is because the mask, necessary for hiding the left half of the circle during rotation, prevents the overlay from transparently appearing over other elements.

Original Code:

<code class="html"><div class="background">
    <div class="wrapper">
        <div class="pie spinner"></div>
        <div class="pie filler"></div>
        <div class="mask"></div>
    </div>
</div></code>

Copy after login

<code class="css">.wrapper .spinner {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    border-right: none;
    border-color: red;
}

.wrapper .filler {
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
    left: 50%;
    border-left: none;
}

.wrapper .mask {
    position: absolute;
    width: 50%;
    height: 100%;
    background: #0000FF;
    opacity: 1;
}</code>

Copy after login

Solution:

Set a background image with a repeating gradient pattern to the body, allowing for a transparent background while retaining visual interest.

<code class="html"><body>
    <div id="container">
        <div id="halfclip">
            <div class="halfcircle" id="clipped"></div>
        </div>
        <div class="halfcircle" id="fixed"></div>
    </div>
</body></code>

Copy after login

<code class="css">body {
    background: repeating-linear-gradient(45deg, white 0px, lightblue 100px);
}

#container {
    width: 200px;
    height: 200px;
    border: solid red 1px;
}

#halfclip {
    width: 50%;
    height: 100%;
    right: 0px;
    transform-origin: left center;
    animation-duration: 16s;
}

.halfcircle {
    height: 100%;
    right: 0px;
    border-radius: 50%;
}

#clipped {
    width: 200%;
    border-top-color: blue;
    border-left-color: blue;
}

#fixed {
    width: 100%;
    transform: rotate(135deg);
    animation-delay: 12s;
}</code>

Copy after login

The above is the detailed content of How to Create a Transparent Circle with a Border-Radius in CSS?. For more information, please follow other related articles on the PHP Chinese website!