• 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

    • Both a game adaptation and it's on Amazon I'll set my hopes low
    • You shut your mouth you young fart, that was just a few years ago, lol.
    • Good effort, but unfortunately not very useful in the real world, since it doesn't support UEFI - which is a major drawback. More than that, most PCs these days have Secure Boot enabled by default, so unless you're tech savvy, the average joe is not going to disable Secure Boot - which means automated Windows > Linux migration programs like this will not work. And if you're tech savvy enough to know how to disable Secure Boot, then you're tech savvy enough to just flash a USB drive and install Linux the usual way - after all, the actual installation process is just point-and-click. So I don't see a use case here to be honest, especially considering the lack of UEFI support - especially when you consider that more and more Linux distros are completely dropping BIOS support (eg Fedora dropped it back in 2022). So this program is a bit too late to the party.
    • 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.
  • 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
      236
    3. 3
      Xenon
      164
    4. 4
      neufuse
      142
    5. 5
      +FloatingFatMan
      123
  • Tell a friend

    Love Neowin? Tell a friend!