Someone named Simon Zhu was curious if CSS could be used to develop a circle with a "partial border," specifically a partial border that arced around more than 90 degrees of the circle.
Check it out here: How to create partial circle border in CSS
The response is affirmative - any arc can be achieved using `clip-path` and `border-radius` along with the `::before` pseudo-element.
Please find the answer below.
To achieve a custom partial circle border, you can utilize the following elements:
clip-path: polygon()border-radius::before pseudo-elementCombine these in various ways to create your desired effect.
Here is an example of how it can be implemented:
.container {
width: 420px
}
.partial-circle {
position: relative;
float: left;
width: 112px;
height: 112px;
margin: 6px 6px 12px 6px;
padding: 6px;
background-color: rgb(255, 0, 0);
border-radius: 50%;
}
.partial-circle::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 124px;
height: 124px;
background-color: rgb(255, 255, 255);
}
.partial-circle::after {
content: '';
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
height: 100px;
margin: 12px;
background-color: rgb(255, 255, 0);
border-radius: 50%;
}
.partial-circle:nth-of-type(1)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%);
}
.partial-circle:nth-of-type(2)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 50%, 30% 100%, 0% 100%);
}
.partial-circle:nth-of-type(3)::before {
clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 10% 100%, 0% 100%);
}
.partial-circle:nth-of-type(4)::before {
clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}
.partial-circle:nth-of-type(5)::before {
clip-path: polygon(0% 0%, 30% 0%, 50% 50%, 30% 100%, 0% 100%);
}
.partial-circle:nth-of-type(6)::before {
clip-path: polygon(0% 0%, 10% 0%, 50% 50%, 10% 100%, 0% 100%);
}
.partial-circle:nth-of-type(7)::before {
clip-path: polygon(0% 10%, 50% 50%, 0% 90%, 0% 100%);
}
.partial-circle:nth-of-type(8)::before {
clip-path: polygon(0% 30%, 50% 50%, 0% 70%, 0% 100%);
}
.partial-circle:nth-of-type(9)::before {
clip-path: polygon(0% 45%, 50% 50%, 0% 55%, 0% 100%);
}<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>
<div class="partial-circle"></div>I'm currently utilizing JQuery to make CSS adjustments on my website and encountering issues with some of the code. I am still new to using jQuery, but usually, I can troubleshoot when making changes - however, this particular issue has me stumped. B ...
Hey there! I currently have an image in the img src="image" tag. Is there a method within CSS to completely replace that image? I am unable to modify the JavaScript or HTML. I attempted using background-image, but the original image is still b ...
I could use some assistance with this issue. I am attempting to populate a form using values from an array, but it's causing problems with the form. My goal is to show the af_rating in the input fields <?php $af_skill = array(12, 9, 6, 3, 4, ...
I'm currently working on creating a sidebar that occupies a fixed percentage of the viewport. Inside this sidebar, I want to have an element that remains fixed at the top while allowing the rest of the content to scroll if it exceeds the height of the ...
I've customized a table by changing the row color based on a property value, and I'm using ng-repeat to display the rows. Here's my table: <table class="tab table span6 tabhover" style="margin:0;" > <thead> ...
There are a few inquiries I have about the HTML5-Canvas code provided below. The text is not visible in Firefox 3.6 (though it shows up on Chrome.) In regards to the ctx variable (ctx = c.getContext("2d")), should this variable be reutilized multiple ...
I want to create an idle game that will save data on the server instead of using cookies. I am looking for a straightforward method (ideally without using MySQL or PHP) to implement user registration and login functionality using HTML5 and/or Javascript. ...
var select_all = document.getElementById("select_all"); //reference to select all checkbox var checkboxes = document.getElementsByName("testc"); //retrieving checkbox items //function to select all checkboxes select_all.addEventListener("change", function ...
I am attempting to achieve a specific functionality in a Django Template Editor where I need to display a quarter of a price. The value quote.total is calculated by the system, such as 1235.00, and I want to manipulate this value to show 308.75 (which is ...
Is it possible to use jQuery to scroll down a page to a specific pixel? I am currently working on a website with a fixed navigation bar that scrolls to an anchor point when a button is clicked, utilizing the jQuery smooth scroll plugin. The issue I am fa ...
$("div[id^='entry']").each(function(){ var currentModal = $(this); //click next currentModal.find('.btn-next').click(function(){ currentModal.modal('hide'); currentModal.closest("div[id^='entry'] ...
Is there a way to continue text in the second column after filling up the first column vertically? I experimented with white space but it didn't work. Any suggestions? <!DOCTYPE html> <html lang="en"> <head> <title> ...
When playing a video through the browser, I am using the following code: <video class="video"> <source src="video.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. </vid ...
I am striving to achieve a layout similar to this: https://i.sstatic.net/HIEB4.png However, in Bootstrap, I am currently getting this: https://i.sstatic.net/sLw1v.png My desired layout specifications are as follows: Width ratios should be in the propor ...
Can anyone help me with a Jquery question? I am trying to display all data with the same class when I click on it. I have created a list of clickable items. When I click on an item, the corresponding data should be shown. However, the code I wrote is not ...
I have recently set up a div element for my slideshow. I've included a script to enable navigation using next and previous arrows. However, I am looking to add an automatic slideshow feature that stops on hover. As a beginner, I would appreciate any a ...
I designed a Grid container with 2 Grid columns, each containing 3 elements. However, I am facing an issue where the last element of each column is not appearing at the bottom as intended. What could be causing this problem? For reference, you can view th ...
Currently working on a ReactJS/MaterialUI webapp and looking to enhance the layout. Seeking advice on whether it's best practice to add padding or margin to create space on the left and right side of the page, similar to popular websites like Stack Ov ...
I am facing an issue with my booking flight form that is supposed to take input from users regarding the number of travelers. I have three textboxes for Adult, Children, and Infants respectively, along with a main textbox to display the final result. Howev ...
I need to modify my button, which contains lengthy text. When the mouse pointer hovers over the button, I would like the long text to wrap into 2 or 3 lines so that more of it is visible. Additionally, I want the remaining text to be displayed with an el ...