Html Question posted in
Some basic documentation can be found here.

Html – How can I make a half filled circle

I want to make the circled outline half filled here is a picture and some code.

    <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 photo of the circle right now:

The photo of the circle right now

Was trying to use linear gradient but couldn’t get it to work.

Tags:

2

Answers


  1. 0

    You need to use radial-gradient when dealing with circular gradients. Change the percentages to change 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>
    Login or Signup to reply.
  2. 0

    Here’s how I would end up doing this. I don’t think using "outline" is a great way to do this. Rather, use a background-image with a radial-gradient to cover the background, then a conic-gradient with values in percent to show the health. In my example I’m using CSS vars to set the values. I have a few examples in the markup of how to modify them. I added a bit of color to show how that might be done flexibly.

    It looks like this for me:

    enter image description here

    .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;
}

.level-100 { --health: 100%; --healthColor: lightgreen; }
.level-99 { --health: 99%; --healthColor: lightgreen; }
.level-98 { --health: 98%; --healthColor: lightgreen; }
.level-97 { --health: 97%; --healthColor: lightgreen; }
.level-96 { --health: 96%; --healthColor: lightgreen; }
.level-95 { --health: 95%; --healthColor: lightgreen; }
.level-94 { --health: 94%; --healthColor: lightgreen; }
.level-93 { --health: 93%; --healthColor: lightgreen; }
.level-92 { --health: 92%; --healthColor: lightgreen; }
.level-91 { --health: 91%; --healthColor: lightgreen; }
.level-90 { --health: 90%; --healthColor: lightgreen; }
.level-89 { --health: 89%; }
.level-88 { --health: 88%; }
.level-87 { --health: 87%; }
.level-86 { --health: 86%; }
.level-85 { --health: 85%; }
.level-84 { --health: 84%; }
.level-83 { --health: 83%; }
.level-82 { --health: 82%; }
.level-81 { --health: 81%; }
.level-80 { --health: 80%; }
.level-79 { --health: 79%; }
.level-78 { --health: 78%; }
.level-77 { --health: 77%; }
.level-76 { --health: 76%; }
.level-75 { --health: 75%; }
.level-74 { --health: 74%; }
.level-73 { --health: 73%; }
.level-72 { --health: 72%; }
.level-71 { --health: 71%; }
.level-70 { --health: 70%; }
.level-69 { --health: 69%; }
.level-68 { --health: 68%; }
.level-67 { --health: 67%; }
.level-66 { --health: 66%; }
.level-65 { --health: 65%; }
.level-64 { --health: 64%; }
.level-63 { --health: 63%; }
.level-62 { --health: 62%; }
.level-61 { --health: 61%; }
.level-60 { --health: 60%; }
.level-59 { --health: 59%; }
.level-58 { --health: 58%; }
.level-57 { --health: 57%; }
.level-56 { --health: 56%; }
.level-55 { --health: 55%; }
.level-54 { --health: 54%; }
.level-53 { --health: 53%; }
.level-52 { --health: 52%; }
.level-51 { --health: 51%; }
.level-50 { --health: 50%; }
.level-49 { --health: 49%; }
.level-48 { --health: 48%; }
.level-47 { --health: 47%; }
.level-46 { --health: 46%; }
.level-45 { --health: 45%; }
.level-44 { --health: 44%; }
.level-43 { --health: 43%; }
.level-42 { --health: 42%; }
.level-41 { --health: 41%; }
.level-40 { --health: 40%; }
.level-39 { --health: 39%; }
.level-38 { --health: 38%; }
.level-37 { --health: 37%; }
.level-36 { --health: 36%; }
.level-35 { --health: 35%; }
.level-34 { --health: 34%; }
.level-33 { --health: 33%; }
.level-32 { --health: 32%; }
.level-31 { --health: 31%; }
.level-30 { --health: 30%; }
.level-29 { --health: 29%; }
.level-28 { --health: 28%; }
.level-27 { --health: 27%; }
.level-26 { --health: 26%; }
.level-25 { --health: 25%; }
.level-24 { --health: 24%; }
.level-23 { --health: 23%; }
.level-22 { --health: 22%; }
.level-21 { --health: 21%; }
.level-20 { --health: 20%; }
.level-19 { --health: 19%; }
.level-18 { --health: 18%; }
.level-17 { --health: 17%; }
.level-16 { --health: 16%; }
.level-15 { --health: 15%; }
.level-14 { --health: 14%; }
.level-13 { --health: 13%; }
.level-12 { --health: 12%; }
.level-11 { --health: 11%; }
.level-10 { --health: 10%; --healthColor: pink; }
.level-9 { --health: 9%; --healthColor: pink; }
.level-8 { --health: 8%; --healthColor: pink; }
.level-7 { --health: 7%; --healthColor: pink; }
.level-6 { --health: 6%; --healthColor: pink; }
.level-5 { --health: 5%; --healthColor: pink; }
.level-4 { --health: 4%; --healthColor: pink; }
.level-3 { --health: 3%; --healthColor: pink; }
.level-2 { --health: 2%; --healthColor: pink; }
.level-1 { --health: 1%; --healthColor: pink; }
.level-0 { --health: 0%; --healthColor: pink; }
    <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>

<div class="ui">
  <div class="status">
    <div class="health" style="--healthColor: red"><i class="fa fa-solid fa-heart"></i></div>
    <div class="armor" style="--healthColor: silver"><i class="fa fa-solid fa-shield-halved"></i></div>
    <div class="hunger" style="--healthColor: orange"><i class="fa fa-solid fa-drumstick-bite"></i></div>
    <div class="thirst" style="--healthColor: purple"><i class="fa fa-solid fa-wine-bottle"></i></div>
  </div>
</div>

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


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

<div class="ui">
  <div class="status">
    <div class="health level-100"><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 level-25"><i class="fa fa-solid fa-drumstick-bite"></i></div>
    <div class="thirst level-10"><i class="fa fa-solid fa-wine-bottle"></i></div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search