• 0

CSS: How to wrap a DIV around a circle?


Question

Does anyone know how to wrap/arc a  <DIV>  around a circle, as in this example?

 

Artboard.png.12f2e7617c572a313c31859c332c814b.png

 

 

Here's my initial code...

 

<div id="RainbowArch" style="background-image: linear-gradient(270deg, #FF0000 0%, #FFF200 21%, #1BE006 48%, #00F6FF 77%, #0098FF 100%); border: 1px solid #979797; Height: 32px; width: 400px"></div>

<div id="GreyCircle" style="background: #DCDBDB; border: 1px solid #979797; solid #979797; Height: 400px; width: 400px; border-radius:50%"></div>

 

5 answers to this question

Recommended Posts

  • 0

I don't know if it's possible with standard HTML/CSS to pull that off. If I wanted something like that, I'd use an SVG.

https://developer.mozilla.org/en-US/docs/Web/SVG

 

You could also design it in a vector designer and export it as am SVG.

  • Like 1
  • 0

look what I found:

I have 2 DIV's as shown below and I've been trying to get the text between the two circles to wrap around the inner circle as shown on the attacthed image. I have not been able to achieve the desired result.

HTML

<div id="outer-circle"> This is just a test logo name <div id="inner-circle"> </div><!-- End Inner Circle --> </div><!-- End Outer Circle -->

CSS

* { margin: 0 auto; } #inner-circle { width: 200px; height: 200px; border-radius: 100%; background-color: green; margin-top: 28px; position: relative; } #outer-circle { width: 300px; height: 300px; border-radius: 100%; background-color: blue; margin-top: 50px; text-align center; text-align: left; }

 

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Posts

    • Sayan Sen, do you think one day an image of the Windows Vista desktop or the wallpaper could be used in the primary image of an article?
    • Big fan of EAC Here's a good non-default naming scheme I found on the web (can't take credit) File Name Scheme - %albumartist%\%year% - %albumtitle%\%tracknr2% %title% Various Artists Naming Scheme - Various Artists\%year% - %albumtitle%\%tracknr2% %title%
    • Hello, Probably the simplest way of doing this would be to add a video card to your computer.   Regards, Aryeh Goretsky  
    • Check out Lisa Melton's GitHub transcoding scripts https://github.com/lisamelton/video_transcoding
    • ChatGPT's Advanced Voice Mode gets a significant update to make it sound more natural by Pradeep Viswanathan OpenAI introduced Advanced Voice Mode last year alongside the launch of GPT-4o. This feature uses natively multimodal models, such as GPT-4o, and can respond to audio inputs in as little as 232 milliseconds, with an average of 320 milliseconds, similar to human response time in a typical conversation. It can also generate audio that feels more natural, pick up on non-verbal cues, such as the speed you’re talking, and respond with emotion. Early this year, OpenAI released a minor update to Advanced Voice Mode that reduced interruptions and improved accents. Today, OpenAI has launched a significant upgrade to Advanced Voice Mode, making it sound even more natural and human-like. Responses now feature subtler intonation, realistic cadence—including pauses and emphasis—and more accurate expressiveness for certain emotions such as empathy and sarcasm. This update also introduces support for translation. ChatGPT users can now use Advanced Voice Mode to translate between languages. Simply ask ChatGPT to start translating, and it will continue translating throughout the conversation until instructed to stop. This feature effectively replaces the need for dedicated voice translation apps. For now, the updated Advanced Voice Mode is available only to ChatGPT paid users. OpenAI also noted that there are some known limitations with this latest update, outlined below. This update may occasionally result in minor reductions in audio quality, such as unexpected variations in tone and pitch—especially noticeable with certain voice options. OpenAI expects to improve audio consistency over time. Rare hallucinations in Voice Mode still persist, sometimes producing unintended sounds resembling ads, gibberish, or background music. While some minor limitations remain, the steady stream of improvements points to a future where the line between human and AI conversation becomes increasingly indistinguishable.
  • Recent Achievements

    • Week One Done
      maimutza earned a badge
      Week One Done
    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      486
    2. 2
      +FloatingFatMan
      264
    3. 3
      snowy owl
      242
    4. 4
      ATLien_0
      223
    5. 5
      Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!