Applying color to just the lower 25% of a circle: a complete guide

Can someone help me figure out how to color only the bottom 25% of a circle using CSS?

I'm looking for something similar to this:

Sample image needed:
https://i.sstatic.net/F1nn4.jpg

Here's what I have so far: screenshot:
https://i.sstatic.net/Ir5GL.jpg

I am trying to eliminate the gap at the bottom and remove padding on the sides

.story svg {
  fill:none;
  stroke:red(218, 218, 218);
  stroke-width:4px;
  stroke-dasharray:1;
  stroke-dashoffset:0;
  stroke-linecap: round;
  stroke:#ff008c;
}

.semi-circle {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 30%;
  width: 71%;
  border-radius:  0 0  100% 100%;
  background-image: linear-gradient(to bottom right, rgb(219, 219, 39),  red);
}
<a class="" rel="">
  <i style="border-radius: 16px"></i>
  <svg class="" viewBox="0 0 100 100">
      <circle cx="50" cy="50" r="40">
  </svg>
  <div class="semi-circle"> <span class="sm-text"> Video </span>  </div>
</a>

htmlcss

Answer №1

Follow this simple method to achieve it

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #d8d8d8;
  position: relative;
  overflow: hidden;
}

.circle .box {
  background-color: #9F3F40;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  height: 40%;
}
<div class="circle">
  <div class="box">
    <h2>video</h2>
  </div>
</div>

Answer №2

To achieve a bottom-aligned text with background in a circular container, one can utilize the CSS property overflow: hidden on the parent div and flexbox for alignment.

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  overflow: hidden;
  background: #d4d4d4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
 
 }
 
.circle p {
 color: white;
 background: darkred;
 height: 50px;
 line-height: 50px;
 text-align: center;
 font-size: 24px;
 margin:0
}
 
<div class="circle">
  <p>video</p>
</div>

Answer №3

I believe I've found the solution.

After experimenting on my own, I managed to make it work. Give this a try and see if it does the trick.

Here is the HTML code:

<div class="circle">
  <span class="text">text</span>
  <div class="fill"></div>
</div>

This is the CSS code:

.circle {
  display: inline-block;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 0px solid white;
  text-align: center;
  line-height: 250px;
  overflow: hidden;
  padding: 3px;
  position: relative;
  box-sizing: border-box;
  box-shadow: 0 0 0 10px gray;
  margin: 50px
}

.fill {
  background-color: teal;
  height: 50%;
  width: 100%;
  position: absolute;
  bottom: -10px;
  left: 0;
}

.text {
  color: white;
  position: absolute;
  top: 60px;
  left: 80px;
  z-index: 1000;
  font-size: 40px;
}

In my opinion, this should work well and you can adjust the color as needed. I will also provide a screenshot of the circle for reference. Please take a look at it below:

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 steps can I take to streamline and simplify this tab controller code?

I'm looking to simplify this jQuery code because I feel like there's repetition. As someone new to JavaScript and jQuery, I've created two tabs with their respective containers containing miscellaneous information. My goal is to have each co ...

javascriptjquerycsstabs

I encountered a problem in Javascript where I was unable to get the video.getCurrentTime() function to display the current time of

While everything else in my code is running smoothly with setInterval, there seems to be an issue with video.getCurrentTime() not displaying in the div id = "test" when the video is playing. I've been trying to figure out why this is happening. Here&a ...

javascripthtml

Interacting Between PHP and Javascript

<form action="../"> <select onchange="window.open(this.options[this.selectedIndex].value,'_top')"> <option value="">Choose a zipcode </option> <option value="92507">92507</option> <option value=" ...

javascriptphphtmlajaxcommunication

"The printing function of the "Print page" button appears to be malfunctioning

I am having some trouble with my JavaScript code for a "print page" button in an HTML document. The button appears and is clickable, but it doesn't actually print the page as intended. I keep receiving 3 errors related to the `document` object being u ...

javascripthtml

Achieve vertical alignment and responsiveness of elements in primefaces using css techniques

In order to vertically align 2 elements inside an outputpanel, I initially used a margin-top of 3em. However, this method proved to be non-responsive, as shown in the following images: https://i.sstatic.net/yMRXc.png In mobile view: https://i.sstatic.net ...

htmlcssprimefacesstylesxhtml

Can Bootstrap be configured to use a single resolution exclusively?

Uncertain about the feasibility, I am initiating this inquiry. Can Bootstrap be utilized solely with one resolution (Medium desktop)? This question arises from the fact that the design I possess is catered towards Medium desktop (970px wide). My intentio ...

csstwitter-bootstrap

Searching for an element with line breaks in its class name on a website using Selenium in Python

I am attempting to extract information from LinkedIn, however I have noticed that the element IDs change every time I refresh the page using Selenium. As a result, I attempted to use class names to locate all elements, but the class names contain newline c ...

htmlpython-3.xselenium-webdriverweb-scraping

Unable to assign the "innerHTML" property to a string

Currently, I am working on developing an Issue Tracker with two main functions. The first function, saveIssue(), is responsible for saving submitted issues to localStorage triggered by the submit eventListener. The second function, fetchIssues(), retriev ...

javascripthtml

Tips for utilizing fontawesome effectively in a select menu

I'm having trouble displaying fontawesome icons in a select element, as they do not appear correctly in the drop-down list. .FontAwesomeSelect { font-family: Font Awesome\ 5 Free; font-size: 18px; } <link href="https://use.fontaw ...

cssfont-awesomefont-awesome-5

Enhancing a character's appearance with custom CSS styling

In my code, I want to highlight a single character throughout the page. I want the lines between each word to be a different color from the rest of the text using CSS, without having to add span tags to each one individually. Anti-virus End Point | Dis ...

htmlcss

PHP is not processing the HTML form I submitted

HTML: <form method="post" action="create.php"> Job #: <input type="text" name="jobnum"> <br> Program: <input type="text" name="program"><br /> Ship Date: <input type="text" name="shipdate"><br /> Description: < ...

phphtmlformshttp-post

When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart The cart is supposed to stick to the right edge and scroll up and down on the page Everything seems to work, but there's a slight issue when I click on Add 1 and ...

javascripthtmljquerycss

Hey there, I'm looking to use different CSS fonts on Windows and Mac for the same page on a web application. Can someone please guide me on how to accomplish this?

In order to tailor the font based on the operating system, the following criteria should be followed: For Windows: "Segoe UI" For Mac: "SF Pro" Attempts have been made using the code provided below, but it seems to load before the DOM and lacks persisten ...

javascripthtmlcssreactjswebkit

Integrating external JavaScript widgets into the web application in real-time

I am currently engaged in a React js project that involves the dynamic addition of third party scripts (widgets) to the web app. These widgets encompass various third party platforms such as Twitter, Instagram, Youplay, Youtube, and more. The existing co ...

javascripthtmlreactjs

Changing the styling frameworks for Components

Into my UI application developed using Angular, I have the option to select from various CSS frameworks such as: Bootstrap 4 Foundation Angular Material ng-bootstrap or ngx-bootstrap. A pre-built template available for purchase. And many o ...

csstwitter-bootstrapangularangular-materialangular2-template

Oops! An issue has occurred: Unable to locate a differ that supports the object '[object Object]' with the type 'object' within Angular

What am I doing wrong? It's working but I got this error in my console. My Model: export class Form { id: number; formTaxID: number; name: string; formYear: number; sectionID: number; createdAt?: Date; updatedAt?: Date; } My Service: ...

htmlangulartypescriptobservable

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

javascriptjqueryhtml

using Javascript to eliminate necessary tags from concealed tabs

My goal is to dynamically remove the required tag from fields in hidden tabs when a tab is clicked using JavaScript. The presence of the required tag on unused fields causes issues with form submission, preventing data insertion into the database. Here&apo ...

javascripthtmltabs

Is there a method to divide a table's TD into two interactive segments?

I'm attempting to create a TD element that can accommodate two entries with a line separating them. This is what the TD will look like on the webpage (1 TD with 2 distinct sections): val/tot ___ ___ | 6 | 5 | --- --- Thank you! ...

jqueryhtmlcss

Caption image on hover

Is it possible to make an image overlap text on a horizontal menu bar when hovering with the mouse? I am designing a horror website and would like a bloody handprint to appear over the links in the menu bar when they are hovered over. I know this can be do ...

javascriptjqueryhtmlcss