What is the best way to create a semi-completed circle?

Question

What is the best way to create a semi-completed circle?

I'm looking to create a unique design by filling half of the circled outline. Take a look at this image and accompanying code snippet:

    <body>
        <div id="ui">
            <div class="status">
                <div class="health">
                    <i class="fa fa-solid fa-heart"></i>
                </div>
                <div class="armor">
                    <i class="fa fa-solid fa-shield-halved"></i>
                </div>
                <div class="hunger">
                    <i class="fa fa-solid fa-drumstick-bite"></i>
                </div>
                <div class="thirst">
                    <i class="fa fa-solid fa-wine-bottle"></i>
                </div>
            </div>
        </div>
    </body>

.thirst, .armor, .health, .hunger {
    display: flex;
    justify-content: center;
    align-items: center; 
    outline-style: solid;
    outline-offset: -3.5px;
    outline-width: 3.5px;
    border-radius: 100%;
    font-size: 14px;
    margin-top: 10%;
    color: rgb(0, 0, 0);
    height: 40px; width: 40px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
}

The current appearance of the circular outline is shown below:

Despite attempts to implement linear gradient, I encountered some challenges.

html css

Answer 1

Answer №1

To create circular gradients, it is recommended to use radial-gradient instead of linear-gradient. Adjusting the percentages in the code will allow you to control the thickness of the line.

.status {
  display: flex;
}

.thirst, .armor, .health, .hunger {
    display: flex;
    justify-content: center;
    align-items: center; 
    outline-style: solid;
    outline-offset: -3.5px;
    outline-width: 3.5px;
    border-radius: 100%;
    font-size: 14px;
    margin-top: 10%;
    color: rgb(0, 0, 0);
    height: 40px; width: 40px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
    margin-right: 10px;
}

.health {
  background: radial-gradient(rgba(0,0,0,0.5) 0% 40%, black 41%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<div id="ui">
    <div class="status">
        <div class="health">
            <i class="fa fa-solid fa-heart"></i>
        </div>
        <div class="armor">
            <i class="fa fa-solid fa-shield-halved"></i>
        </div>
        <div class="hunger">
            <i class="fa fa-solid fa-drumstick-bite"></i>
        </div>
        <div class="thirst">
            <i class="fa fa-solid fa-wine-bottle"></i>
        </div>
    </div>
</div>

Answer 2

To create circular gradients, it is recommended to use radial-gradient instead of linear-gradient. Adjusting the percentages in the code will allow you to control the thickness of the line.

.status {
  display: flex;
}

.thirst, .armor, .health, .hunger {
    display: flex;
    justify-content: center;
    align-items: center; 
    outline-style: solid;
    outline-offset: -3.5px;
    outline-width: 3.5px;
    border-radius: 100%;
    font-size: 14px;
    margin-top: 10%;
    color: rgb(0, 0, 0);
    height: 40px; width: 40px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.5);
    margin-right: 10px;
}

.health {
  background: radial-gradient(rgba(0,0,0,0.5) 0% 40%, black 41%);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>
<div id="ui">
    <div class="status">
        <div class="health">
            <i class="fa fa-solid fa-heart"></i>
        </div>
        <div class="armor">
            <i class="fa fa-solid fa-shield-halved"></i>
        </div>
        <div class="hunger">
            <i class="fa fa-solid fa-drumstick-bite"></i>
        </div>
        <div class="thirst">
            <i class="fa fa-solid fa-wine-bottle"></i>
        </div>
    </div>
</div>

Answer 3

Answer №2

In my approach to tackling this challenge, I opted not to use the "outline" property as it may not be the most effective solution. Instead, I utilized a combination of a background-image with a radial-gradient for the background and a conic-gradient with percentage values to represent the health status. Additionally, I leveraged CSS variables in setting these values and provided examples within the markup on how they can be adjusted. To add a touch of flexibility, I incorporated color variations.

The output of my implementation looks like:

https://i.sstatic.net/VPE5z.png

.thirst, .armor, .health, .hunger {
    --health: 50%;
    --healthColor: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center; 
    color: #fff;
    height: 40px; 
      aspect-ratio: 1;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: transparent;
      background-image: radial-gradient(
          circle,
            #252526 15px,
            transparent 9px 18px,
            #252526 18px
        ),
            /* conic gradient can also be done using deg units. 90deg = 25%, etc */
        conic-gradient(
          var(--healthColor) var(--health),
            #252526 0
        );
}

body {
    display: flex;
    gap: 40px;
    background: #7d7d7e;
}
.ui {
    width: 40px;
}
.status {
  display: grid;
    gap: 10px;
}

<!-- The remaining code snippets are related to styling levels and UI elements -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>

<div><img src="https://i.imgur.com/Jhb4elX.png"></div>

<div id="ui" class="ui">
  <div class="status">
    <div class="health"><i class="fa fa-solid fa-heart"></i></div>
    <div class="armor"><i class="fa fa-solid fa-shield-halved"></i></div>
    <div class="hunger"><i class="fa fa-solid fa-drumstick-bite"></i></div>
    <div class="thirst"><i class="fa fa-solid fa-wine-bottle"></i></div>
  </div>
</div>

<!-- Additional UI element configurations with custom styles based on different levels -->

Answer 4

In my approach to tackling this challenge, I opted not to use the "outline" property as it may not be the most effective solution. Instead, I utilized a combination of a background-image with a radial-gradient for the background and a conic-gradient with percentage values to represent the health status. Additionally, I leveraged CSS variables in setting these values and provided examples within the markup on how they can be adjusted. To add a touch of flexibility, I incorporated color variations.

The output of my implementation looks like:

https://i.sstatic.net/VPE5z.png

.thirst, .armor, .health, .hunger {
    --health: 50%;
    --healthColor: #f8f8f8;
    display: flex;
    justify-content: center;
    align-items: center; 
    color: #fff;
    height: 40px; 
      aspect-ratio: 1;
    border-radius: 50%;
    font-size: 14px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    text-shadow: 0px 0px 1px rgb(0, 0, 0);
    background-color: transparent;
      background-image: radial-gradient(
          circle,
            #252526 15px,
            transparent 9px 18px,
            #252526 18px
        ),
            /* conic gradient can also be done using deg units. 90deg = 25%, etc */
        conic-gradient(
          var(--healthColor) var(--health),
            #252526 0
        );
}

body {
    display: flex;
    gap: 40px;
    background: #7d7d7e;
}
.ui {
    width: 40px;
}
.status {
  display: grid;
    gap: 10px;
}

<!-- The remaining code snippets are related to styling levels and UI elements -->

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet"/>

<div><img src="https://i.imgur.com/Jhb4elX.png"></div>

<div id="ui" class="ui">
  <div class="status">
    <div class="health"><i class="fa fa-solid fa-heart"></i></div>
    <div class="armor"><i class="fa fa-solid fa-shield-halved"></i></div>
    <div class="hunger"><i class="fa fa-solid fa-drumstick-bite"></i></div>
    <div class="thirst"><i class="fa fa-solid fa-wine-bottle"></i></div>
  </div>
</div>

<!-- Additional UI element configurations with custom styles based on different levels -->

What is the best way to create a semi-completed circle?

Answer №1

Answer №2

Similar questions

Transforming an HTML and Javascript Project into a Standalone Application

Extracting information from JSON ( AngularJS)

Styling a Form Submission with CSS

Set the height of one element to equal the height of a different element using CSS

Tips to position a div directly on top of table cells using absolute positioning

How to Align HTML Menu in the Middle of the Page

Is it possible to save a dynamic web page to a file?

Intersection of content in panel-body using bootstrap tab pills

I'm having trouble making the colors change on my Icon font/sprite rollover

Wrapping a series of grids within a parent container to manage height effectively with grid960

Grid numbering with CSS in jQuery mobile design

The functionality of my bootstrap carousel seems to be malfunctioning as the fdi-Carousel slide is

What could be the reason behind Bootstrap not functioning properly?

Position an image to the right with a specific height using position absolute in Bootstrap 4.3

developing a star rating system for a mobile website

Stop a div at a specific point with this unique jQuery plugin

Is there a way to customize the mark style in Bootstrap?

The integration of Angular CLI with SCSS is no longer a separate process -

Two separate tables displaying unique AJAX JSON response datasets

Manage the width of flex items organized vertically within a flexbox parent