What is the best way to create this shape using the ::before and ::after CSS pseudo-elements?

I'm exploring various methods of drawing shapes in CSS, and I'd like to tackle this challenge using the ::before and ::after pseudo-elements.

https://i.sstatic.net/aGJfB.png

Everything came together except for the yellow section.

.body{
          width:100%;
          height:100%;
          background:#191919;
          display: flex;
          justify-content: center;
          align-items: center;
        }
.circle {
    position: relative;
    width: 160px;
    height: 160px;
    background: #824B20;
    border-radius: 50%;
  }
.circle::before{
    content: "";
    width: 100px;
    height: 100px;
    background: #E08027;
    position: absolute;
    border-radius: 50%;
    top: 50%;
    left: 50%;       
    transform: translate(-50%,-50%);
  }
.circle::after{
    content:"";
   /*color : #FFF58F */    
  }
<div class="body"><div class="circle";div><div><div>

htmlcsscss-shapes

Answer №1

A creative concept utilizing gradients:

.circle {
  width: 200px;
  aspect-ratio:1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 78% 50%, blue 5%, #0000 6%),
    radial-gradient(circle at 22% 50%, blue 5%, #0000 6%),
    radial-gradient(at top, #0000 33%, blue 34% 45%, #0000 46%) 
      bottom/100% 50% no-repeat,
    radial-gradient(#3E3567 40%,#2A2248 41%);
}
<div class="circle"></div>

Answer №2

.container {
  width: 100%;
  height: 100vh;
  background: #191919;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.circle-shape {
  box-sizing: border-box;
  position: relative;
  width: 160px;
  height: 160px;
  background: #E08027;
  border: 30px solid #824B20;
  border-radius: 50%;
}

.half-circle {
  position: absolute;
  width: 85px;
  height: 85px;
  border: 14px solid #FFF58F;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.half-circle::before,
.half-circle::after {
  content: "";
  position: absolute;
  top: 69px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #FFF58F;
}

.half-circle::before {
  left: 0;
}

.half-circle::after {
  left: 71px;
  transform: translate(-2px, -70px);
}
<div class="container">
  <div class="circle-shape">
    <div class="half-circle"></div>
  </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

Take out the username field from the registration form in Woocommerce

Is there a way to eliminate the username section from the registration form on woocommerce? I attempted to remove certain lines from the woocommerce/myaccount/login-form.php <?php if ('no' === get_option( 'woocommerce_registration_gene ...

phphtmlwoocommerce

Properly aligning sub-divs within a parent div using CSS

I'm facing a problem with my CSS styling that I need help with. Here is the screenshot of the issue I am trying to center align the inputs, each placed in its own div, within my form. Below is the HTML markup for the form: HTML Markup Code CSS st ...

htmlcssalignmentstylesheetmarkup

unable to locate element using findcontrol on dynamically generated HTMLselect

During the page load, I am creating select controls (Q1DDL and Q2DDL) within the innerHTML of a div called divQ1AnswerDDLSub. The code generates perfectly as expected. However, after pressing the SUBMIT Button, ASP.net's findControl function is unab ...

asp.nethtmlhtml-selectcode-behindfindcontrol

Dynamic tables that reorganize when viewed on different devices

While working on a responsive website with Magento v1.8, I encountered a challenge in making the header responsive. I attempted using div but couldn't get it to work as expected. Switching to the table method has brought me halfway there, but I'm ...

htmlcssmagentoresponsive-designhtml-table

Problem with React-Bootstrap CSS styling

After importing Bootstrap CSS, I noticed that extra CSS is being applied to the navbar, as seen in the image below. Although Bootstrap cards are being used in the code, the issue is specifically with the Navbar. Interestingly, the problem disappears when I ...

cssreactjsreact-bootstrap

What is the best way to pass a value from an addEventListener to another object for use?

In my project, I am trying to create three sliders that can adjust the color of a div when changed. Each slider functions properly, and I am able to track the value changes in the console. However, I am facing a challenge when attempting to assign that val ...

javascripthtml

The issue of multiple clicks being triggered when opening a dialog box: comparing the trigger and the click events

When I right-click on a jTree list item, a dialog box pops up for editing. The dialog box has a table with a list of items similar to the original one selected. The first time I open the dialog box, the selected item is highlighted and its information popu ...

javascriptjqueryhtml

Enhanced Bootstrap 4 button featuring custom design with text and image aligned on the right side, optimized for flexbox layout

I am looking to design a button-like div that features a flag image alongside the abbreviation of a country. Although I have some code in mind, it doesn't follow Bootstrap's guidelines and I am struggling to adapt it accordingly. <div cla ...

htmltwitter-bootstrapbuttonbootstrap-4

What is the best way to adjust the size of carousel images within a box element?

How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...

javascripthtmlcssbootstrap-4

Enhancing the style of the top menu Index by applying a border-bottom effect when hovering over it in a CSS Horizontal Drop Down Menu

I'm having trouble adding a border-bottom: 1px solid #FFF to all the top menu (index) items when they are hovered over. Can anyone help me with this? #menu{ padding:0; margin:0; position: fixed; top: 30px; left: 0px; font-size ...

htmlcss

utilizing the 'v-for' directive for creating a stylish CSS grid

I am having trouble getting these images to display horizontally on the preview instead of vertically. I attempted using display grid in the CSS, but they still show up vertically. Can someone please help me figure out what I am missing? Essentially, when ...

cssvue.js

How to position a popup window perfectly in the center without having direct access to the popup code

Currently, I am faced with the challenge of using software that does not allow direct editing of HTML on individual pages. Instead, I have the ability to add code to the header and footer to make modifications to the content within the body of each page. ...

jqueryhtmlcss

HTML - various incorrect horizontal alignments

I'm having trouble getting the site logo, site name, and site header to align horizontally on my website. They keep ending up in different places.https://i.stack.imgur.com/5yL5f.jpg I'd like it to look similar to this: https://i.stack.imgur.com/ ...

htmlcss

Launch a popup modal box from within an iframe and display it in the parent window

I'm facing a challenge with opening a modal dialog in the parent page from an iframe. The button to open the modal dialog resides in the iframe, but the modal div is located on the parent page. Here's a snippet of my parent page: <html xmlns ...

jqueryhtmliframepopupmodal-dialog

The div is inexplicably shifting downward once the first three rows are shown correctly

After displaying the first 3 rows properly, the div mysteriously moves down. Could I be making a silly mistake? All images have the same width and height. Please see the attached image for reference. <?php // start first row echo "<hr class='m ...

javascriptphpjquerycsscodeigniter

jQuery's :last selector allows you to target the last

I need assistance with my jQuery code $('#share_module:last').css("background-color","red"); Unfortunately, it is only affecting the first #share_module Here is an example of the HTML structure: <div id = "share_module" class = "id of the ...

javascriptjqueryhtml

What is the best method for choosing all elements located between two specific elements?

If I have the following HTML code, what CSS selector can I use to target all elements between #one and #two without using jQuery? <p id="one"></p> <p></p> <p></p> <p></p> <p></p> <p></ ...

csscss-selectors

The styling of the first column in this row will be different from the rest

Despite having the same styling and no typing errors, I am still facing an issue with the first column not being styled correctly. It appears as nothing but text inside a column square. HTML: <div class="container-fluid"> <!--Nav Bar--> ...

htmlcsstwitter-bootstrapbootstrap-4

What could be causing the Bootstrap collapse feature to malfunction?

<nav id="na-vrh" class="navbar navbar-expand-lg navbar navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> < ...

htmlbootstrap-5

Is it possible to toggle between thumbnails and a larger image in a jQuery gallery?

Hello, I am new to website development and I would like to create a jquery based photo gallery for my personal website. One feature that really catches my eye is this one (for example): The gallery has a large thumbnail grid where you can click on a thumb ...

jquerycssgalleryslideshowthumbnails