• 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

    • I agree with open rights group that the age check companies should be regulated but action does need to be taken imo, they may be called irresponsible parents but the fact is that many don't know how to set up blocks. Why should kids suffer because their parents don't know something? I think the UK has always been a bit like this. We don't say healthcare is your responsibility, we tax everyone and make people register with the NHS. We also don't expect everyone to brush their teeth to maintain dental health, we just put fluoride in their water assuming people aren't brushing enough, because some probably aren't or aren't doing it properly. In general, this way of doing things works.
    • Well that's the weird thing, the UK really isn't a very religious country at all and the same politicians that are backing this (basically all of them) also support things like assisted dying which various religions spoke out against. I don't think this is coming from religion, of course religious groups will support it but I don't think they've started it.
    • No.  The only thing you'll be able to capture with that is via antenna (your local NBC, CBS, etc) or if you had a regular cable box you could capture ClearQAM channels (if they are still a thing...probably not though).  Everything else will have encryption which those capture cards aren't meant for.   So yeah...you'll need Verizon's DVR (sucks if you have to pay for it).
    • I've gotta say Microsoft has lost the plot a long, long, long time ago.
    • How is it be technically implemented, I mean if you wanted to include this let's say on this website, at what point do you interrupt the user flow and say yo! Show me your ID or get the hell out? Please go into extreme technical detail. Is it using a third-party, how much information does neowin receive from that third-party, at what point would that information be abused? We all know it would be abused. So hypothetically what would neowin receive from that third-party company?
  • Recent Achievements

    • One Month Later
      Falcon.ai earned a badge
      One Month Later
    • Week One Done
      Falcon.ai earned a badge
      Week One Done
    • Dedicated
      EYEREX earned a badge
      Dedicated
    • First Post
      Electronic Person earned a badge
      First Post
    • Week One Done
      CyberCeps666 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      628
    2. 2
      ATLien_0
      235
    3. 3
      Xenon
      164
    4. 4
      neufuse
      142
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!