Home > Article > Web Front-end > How to Create a Transparent Circle with a Border-Radius in CSS?

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

Linda HamiltonOriginal: 2024-10-25 06:09:02787browse

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>

<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>

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>

<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>

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!

css for while this border background

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：**Can You Apply CSS Classes Directly to RMarkdown Code Chunks?**Next article：**Can You Apply CSS Classes Directly to RMarkdown Code Chunks?**

See more

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

Related articles