What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume.

Here is my initial attempt:

    <style scoped>
.strip:before {
  position: absolute;
  background: #343434;
  border-bottom: 2px solid black;
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 15%;
  left: 0;
}

.oval div {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
</style>

The current output looks like this:

My goal is for the green section to represent the liquid level by changing dynamically based on the liquid volume.

The value at the bottom should also be constantly updating.

--EDIT I'm attempting it this way:

<div class="oval" >
            <div class="strip" v-bind:style="{ background: props.item.color}"></div>
          </div>
css

Answer №1

To create a visually appealing "partially filled" bar effect, you can utilize a single div element with a background of linear-gradient:

.oval {
  --fill-level: 60%;

  background: linear-gradient(0deg, green var(--fill-level), black var(--fill-level));
  border-width: thin 10px;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
<div class="oval"></div>

If you switch the value from 0deg to 90deg, you'll achieve the traditional horizontal "progress bar": 

.oval {
  --fill-level: 60%;

  background: linear-gradient(90deg, green var(--fill-level), black var(--fill-level));
  border-width: thin 10px;
  border-radius: 150px;
  height: 100px;
  width: 80%;
}
<div class="oval"></div>

Answer №2

You're on the right track! To achieve this effect, you only need one element: .oval. By styling the oval element and using the :before pseudo-selector, you can easily add a line with control over its position using the bottom value.

.oval {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
  overflow: hidden;
  background-color: green;
}
.oval:before {
  position: absolute;
  bottom: 25%;
  width: 100%;
  height: 3px;
  background: black;
  content: '';
}
<div class="oval"></div>

Alternatively, you can create the line using a separate element by nesting the .strip within the oval. This way, you do not need to utilize the :before selector on the .strip element as in your initial attempt.

.strip {
  position: absolute;
  background: #343434;
  border-bottom: 2px solid black;
  z-index: 1;
  bottom: 25%;
  width: 100%;
  height: 3px;
}

.oval {
  position: absolute;
  background: #343434;
  background-repeat: repeat;
  border-width: thin 10px;
  transition: all;
  -moz-border-radius: 0 50% / 0 100%;
  -webkit-border-radius: 0 50% / 0 100%;
  border-radius: 150px;
  height: 100px;
  width: 80%;
  background-color: green;
  overflow: hidden;
}
<div class="oval">
  <div class="strip"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...

htmlcss

Is utilizing the bootstrap grid system to create nested rows a viable option?

Looking to feature 1 larger image alongside 4 smaller images in a 2x2 layout: I initially considered placing everything in one row, then dividing into two columns. In the second column, I would create two rows with two columns each to achieve the desired ...

csshtmltwitter-bootstrapgridgrid-system

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

Show an image when hovering over a dot using CSS - without hovering directly on the image

I'm currently working on a merchandising page that involves photoshopping several products onto a background image. I want customers to be able to hover over a dot positioned on each product to reveal its information and provide a link similar to . Ho ...

htmlcss

Having trouble accurately obtaining the height of a DIV element using jQuery

After trying to troubleshoot on my own, I ran into a roadblock due to my specific requirements not being met by existing solutions. The issue at hand is as follows: I have a sticky DIV element positioned to the left, nested within another DIV Element wit ...

javascriptjqueryhtmlcss

Developing a user-friendly widget for a website that is not optimized for mobile devices

Here's the backstory: I'm currently in the process of creating a mobile-friendly widget for my clients. Unfortunately, they have web pages that are not optimized for mobile devices, and it doesn't seem like that will change anytime soon. Th ...

javascriptjqueryhtmlcssmobile

What steps can I take to properly position my child element within its parent container?

Is there a way to adjust the width of a child element so it fits snugly inside its parent div? The width should be contained within the padding area. The top and left placement is correct, but the right side needs adjustment. Check out this link for refe ...

htmlcss

Managing multiple carousels simultaneously using the middle mouse button in Swiper.js

I am currently utilizing 5 carousels on my screen, all of which are operated by the same navigation buttons. In addition to this, I require the ability to control them using the middle mouse scroll. However, when I activate the mouse wheel control, only ...

javascriptcsscarouselswiper.js

What is the best way for Selenium in C# to identify and locate a specific span element by its value

I've been experimenting with different locators, but I'm struggling to find a straightforward solution for identifying the dynamic number within this span using C# Selenium. Initially, my focus is just on locating the span itself. <span inven ...

c#cssseleniumcss-selectorsui-automation

I'm struggling with my project called "Number TSP" and I can't seem to figure out why it's not working properly

Upon reaching the end of my code, I am encountering an issue where instead of seeing the expected output of "Done!", it displays undefined. This is the code in question: const container = document.querySelector(".container") const table = document.querySe ...

javascripthtmlcss

The slider's border-radius is not being maintained as it moves from left to right

We recently implemented a slider on our website, located at . While we added a border-radius to the slider, we noticed that when the images slide, the border-radius is slightly removed... I attempted to contain the parent element with overflow: hidden, bu ...

jqueryhtmlcssslider

Searching dynamically using class names with JQuery

I am seeking to create a dynamic search input based on the class names within the span tags. However, I am struggling with displaying the class name that I have identified. My goal is to show the class names that match the entered value in the input on the ...

javascripthtmljquerycss

Find the current location of the scroll bar on the view port

Currently, I am utilizing the Addazle React grid for my project. However, I need to incorporate endless scrolling functionality which is not already included in this grid system. Thus, I am tasked with devising my own solution for this issue. To successful ...

javascriptjqueryhtmlcssreactjs

Setting up the Bootstrap grid structure

Struggling to find the right configuration for this Bootstrap 3 setup... https://i.stack.imgur.com/ZsTdI.png I have an input field, but I'm having trouble placing the image in that position. <div class="row"> <div class="col-sm-4 col-m ...

csshtmltwitter-bootstrapgrid

The div element with the id "wrapper" is not functioning properly within the box model

I have defined an ID wrapper in CSS: #wrapper { position: relative; background: yellow; -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2); width: 960px; padding: 40px 35px 35px ...

javascriptjqueryhtmlcss

When it comes to assigning a background to a div using jQuery and JSON

I have been experimenting with creating a database using only JSON and surprisingly, it worked once I added a "js/" in the URL. However, my current issue lies with CSS. Let me elaborate. Here is the JSON data: [ { "title":"Facebook", ...

javascriptjqueryhtmlcssjson

The responsive menu refuses to appear

my code is located below Link to my CodePen project I'm specifically focusing on the mobile view of the website. Please resize your screen until you see the layout that I'm referring to. I suspect there might be an issue with my JavaScript cod ...

javascripthtmlcss

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

htmlcss

A guide to incorporating external CSS files in Angular 5 components using styleUrls

I have a unique setup where my Angular 5 application resides in a subdirectory within another parent application. The parent application consists of JSP and other AngularJS applications among other things. My goal is to include a CSS file from the parent ...

javascriptcssangularangular-cliangular-components

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate