• 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

    • How did two companies come up with the same stupid name for the same stupid type of product?
    • I honestly think this does not make any noticable difference to anyone with a PC with average specs.
    • OpenAI takes down all traces of Jony Ive "io" deal following court order by David Uzondu Early this month, we reported that OpenAI was working on a mobile gadget in the form of a screenless, wearable device, born from a newfound partnership (friendship?) between renowned former Apple designer Jony Ive and OpenAI CEO Sam Altman. The announcement came with a video that had the two men talking about the future of technology. Well, that video has now been made private on YouTube, and the original announcement page has been taken down. The whole thing is on pause because of a simple trademark dispute. OpenAI was forced to pull the materials following a court order. If you visit the original announcement page, it now says: Despite the legal hassle over the name, the actual business deal seems safe. According to Bloomberg's Mark Gurman, the acquisition itself is unaffected by the complaint. So, who is iyO (pronounced eye-oh), the other party in this mess? If the name sounds unfamiliar, its background will not. This iyO company is an independent startup that graduated from X, Alphabet's moonshot factory, and yes, that is the same Alphabet, the parent company of Google. iyO claims to be on a mission to bring "natural language computing" to the masses. A quick look shows two products listed on its website: the Vad Pro, a high-end wired audio device for professionals, and iyO One, a set of AI-powered earbuds the company is calling the "world's first audio computer." A judge reportedly found its trademark lawsuit against OpenAI credible enough to issue the restraining order, suggesting the ChatGPT creator's video could create genuine consumer confusion between the two similarly named ventures.
    • I've set since XP - Best performance in the Performance settings. 11 included. I enable only the show shadows after that, so I can see better fonts and mouse.. But hardly I can say I can see a difference today.
    • Yeah this kinda means nothing to me if it's going to be the same mess as HDMI 2.1 where it was difficult to know what features you were getting. It was way too confusing, designed to fool us into thinking we was getting something better with the higher number when a lot of the times we didn't get anything better because companies can add and remove features at will, which if that is the case for 2.2, then who cares lol.
  • Recent Achievements

    • Conversation Starter
      Brett76 earned a badge
      Conversation Starter
    • One Month Later
      Miguel Batista earned a badge
      One Month Later
    • Dedicated
      moojay67 earned a badge
      Dedicated
    • One Month Later
      Jim Dugan earned a badge
      One Month Later
    • First Post
      Johnny Mrkvička earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      655
    2. 2
      Michael Scrip
      229
    3. 3
      ATLien_0
      220
    4. 4
      Steven P.
      150
    5. 5
      Xenon
      143
  • Tell a friend

    Love Neowin? Tell a friend!