"Creating a semi-circular arch with CSS encompassing an entire

I am looking to create a unique design with a half arch surrounding a full circle, similar to the image below. Can anyone provide guidance on how to achieve this effect using CSS? I have successfully created the circle using the code below, but I am uncertain on how to proceed with the arch.

https://i.sstatic.net/5cteC.png

.circle {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  position: relative;
  background: #BDBDBD;
}
<div class="circle">1</div>

csscss-shapes

Answer №1

To create a half circle using CSS, you can utilize the :after pseudo-element along with specifying bottom-right and top-right border-radius properties.

.circle {
  width: 100px;
  height: 100px;
  margin: 50px;
  position: relative;
  line-height: 100px;
  text-align: center;
  border-radius: 50%;
  background: #BDBDBD;
  color: white;
}

.circle:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border: 10px solid gray;
  border-left: 0;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
  width: 55px;
  height: calc(100% + 10px);
  transform: translate(15px, -15px);
}
<div class="circle">1</div>

Answer №2

After reading jcaron's feedback on the question, I implemented a solution by enclosing the circle within an outer-circle div to achieve the "white space between greys" effect.

On the other hand, Nenad Vracar's response appears to be more elegant and efficient.

.outer-circle {
  width: 45px;
  height: 45px;
  border-style: solid;
  border-width: 1x 1px 0 0;
  border-color: #BDBDBD #BDBDBD transparent transparent;
  border-radius: 50%;
  font-size: 20px;
  color: #fff;
  line-height: 45px;
  text-align: center;
  position: relative;
  background: #fff;
  padding: 3px;
  transform: rotate(45deg);
}

.circle {
  background: #BDBDBD;
  border-radius: 50%;
  transform: rotate(-45deg);
}
<div class="outer-circle">
  <div class="circle">
    1
  </div>
</div>

Answer №3

Indeed, you can utilize the pseudo selector, but ensure that the background of the parent element is set to white or a color that blends well with the pseudo selector, such as the center portion between the circle and half arch, or you could achieve this utilizing canvas.

body {
  background: #fff;
}

div {
  width: 100px;
  height: 100px;
  background: #ccc;
  border-radius: 50%;
  text-align: center;
  position: relative;
  margin-top: 30px;
  color: #fff;
  padding-top: 40px;
  box-sizing: border-box;
}

div:after {
  content: "";
  position: absolute;
  border-top: 70px solid transparent;
  border-left: 70px solid transparent;
  border-right: 70px solid #ccc;
  border-bottom: 70px solid #ccc;
  border-radius: 50%;
  z-index: -2;
  transform: rotate(-45deg);
  left: -15px;
  top: -20px;
}

div:before {
  content: "";
  position: absolute;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-right: 60px solid #fff;
  border-bottom: 60px solid #fff;
  border-radius: 50%;
  z-index: -1;
  transform: rotate(-45deg);
  top: -10px;
  left: -7px;
}
<div>1</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 might be causing the sudden shifts in element positions during TweenLite animation?

I have created a demo of my code in this JSFiddle and also included it below. The issue I am facing occurs in Google Chrome, so I would recommend using that browser to replicate and fix the bug. Please note that the code is a snippet from a larger project ...

javascriptjquerycssanimationgsap

Changing the color of a tooltip for a specific element using Bootstrap 4

Is there a way to customize the tooltip background-color for icons with the classes "alert-danger" to red and "alert-success" to green using the following CSS commands: .alert-danger + .tooltip > .tooltip-inner { background-color: red !important; } ...

javascriptjqueryhtmlcsstooltip

What is the best way to add two hyperlinks within a single tab of a Bootstrap navigation menu?

I attempted to place two links in one tab, but I was unsuccessful. Here is my navbar code: <!DOCTYPE html> <html lang="eng"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scal ...

htmlcssbootstrap-5

Switch Cursor on Movable Area in Electron

Working on a project in Electron and having some trouble with a frameless window. I have designated certain top areas as draggable using -webkit-app-region: drag, but the cursor will not change as expected. Although this code snippet won't make the e ...

javascriptcsselectronelectron-builder

gulp-minify-css-names not altering any files during processing

For quite some time, I have been on the search for a solution that can assist me in automating the process of renaming/minifying class names in HTML, JS, CSS files simultaneously throughout my entire project using gulp. While there are many solutions avai ...

htmlcssnode.jsnpmgulp

AgGrid's magical dropdown feature

Struggling to integrate a bootstrap-4 dropdown menu with AgGrid, I'm facing an issue where the data table overlaps the dropdown when the html is present. Attempts to increase the z-index have not yielded results. Below is the html code snippet: < ...

javascripthtmlcssangular

determining the perfect size of a container by analyzing its content

Displayed here is a snapshot of content included in form validation for a website project that's currently in development: The content is currently situated within a div element with its width set to 20%. Initially, without this rule, the div spanned ...

css

Leveraging MUI v5 sx Prop for Applying Various CSS Properties Simultaneously (such as margin, border-radius, and more)

Is there a more efficient way to write the following code that utilizes the sx prop's access to spacing units? <MUIComponent sx={{ borderRadius: '4px 8px 12px 16px' }} /> Could it be written like this instead? <MUIComponent sx={{ b ...

cssreactjsmaterial-uisx

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

cssangularinputangular-material

What is the best way to center text in a div with a distinct background color?

Could really use some assistance with this. Here are the images for reference: https://i.stack.imgur.com/JNZkT.jpg Currently getting this result: https://i.stack.imgur.com/nW17o.jpg <style> .Nav_bar_links div{ margin: 0% 1 ...

htmlcssweb-deployment

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

How can I prevent text highlighting on a website?

Is there a way to lock the copy button on my site without restricting the save as button, which is activated by right click? I want users to be able to save the website as an HTML file, but prevent them from copying text. Can this be achieved using Javas ...

javascripthtmlcsslockingsites

Take away the CSS class from an element after reCAPTCHA verification is complete in Next.js

I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry. I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified. Howe ...

javascripthtmlcssreactjsnext.js

Firefox compatibility issue: Bootstrap modal button not functioning properly when wrapping other HTML elements

Hey everyone, I've come up with some awesome image hover effects that you can use. I've implemented bootstrap modals so that when you click on 'show code', a pop-up will display with the HTML and CSS codes for easy copy-pasting. However ...

htmlcsstwitter-bootstrap

How can HTML and CSS be linked to display images independently?

Check out this code: body{ background-image:url('http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg'); } div.header{ background-color:#F0F8FF; text-align:center; padding:3px; ...

javascriptjqueryhtmlcss

PHP pattern matching equivalent to selecting elements based on their position in CSS

Struggling with the logic to identify objects in an array by their position. Seeking a PHP equivalent of nth-child(5n + 1) condition, which targets positions like 0, 5, 10, and so on within a loop. One approach could be to divide by 5 and check for whole ...

phpcssregex

Clear out any unnecessary white space beneath the content on your webpage

I am relatively new to Web Development and currently following Colt Steele's udemy course. I have been working on a landing page, but as I try to set the height of HTML to 100%, it leaves whitespace at the bottom. After some research, I suspect that t ...

htmlcssbootstrap-4

Toggle the visibility of images with input radio buttons

Explanation I am attempting to display an image and hide the others based on a radio input selection. It works without using label, but when I add label, it does not work properly. The issue may be with eq($(this).index()) as it ends up selecting a differ ...

javascriptjqueryhtmlcss

Can display-inline-block support top margin and text alignment?

Can you please explain if the top margin and text-align properties work for both display: inline and display:inline-block? If they do, could you provide some insight as to why? ...

htmlcssblockinlinedisplay

Tips for creating sliding header content alongside the header

Is it possible for the content in the header to scroll up, displaying only the navigation list and hiding the logo when a user scrolls on the website? Currently, while the header background slides up, the content within the header remains in place. I feel ...

jqueryhtmlcssscrollnav