• 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

    • Microsoft is removing legacy drivers from Windows Update by Usama Jawad Last month, we learned that Microsoft is making major changes to the development of hardware drivers in Windows. This included the retirement of Windows Metadata and Internet Services (WMIS), along with the process for pre-production driver signing. Now, the Redmond tech firm has informed partners that it will be getting rid of old drivers in Windows Update. In what is being described as a "strategic" move to improve the security posture and compatibility of Windows, Microsoft has announced that it will be performing a cleanup of legacy drivers that are still being delivered through Windows Update. Right now, the first phase only targets drivers that already have modern replacements present in Windows Update. As a part of its cleanup process, Microsoft will expire legacy drivers so that it is not offered to any system. This expiration involves removing audience segments in the Hardware Development Center. Partners can still republish a driver that was deemed as legacy by Microsoft, but the firm may require a justification. Once the Redmond tech giant completes its first phase of this cleanup, it will give partners a six-month grace period to share any concerns. However, if no concerns are brought forward, the drivers will be permanently eradicated from Windows Update. Microsoft has emphasized that this will be a regular activity moving forward and while the current phase only targets legacy drivers with newer replacements, the next phases may expand the scope of this cleanup and remove other drivers too. That said, each time the company takes a step in this direction, it will inform partners so that there is transparency between both parties. Microsoft believes that this move will help improve the security posture of Windows and ensure that an optimized set of drivers is offered to end-users. The firm has asked partners to review their drivers in Hardware Program so that there are no unexpected surprises during this cleanup process.
    • No idea, but I had a client the other week that lost the entire drive to it. I suggested relying on the Samsung T7's instead. The Sandisk Extreme's had reliability issues too.
    • I use it every day so personally yes I need it, or rather I want it. I use OpenShell though, not the garbage modern Start Menu. I just counted and at the moment I have a total of 92 program shortcuts organized into six folders almost exactly the way I did back in Windows 95. I can get to any program I want to run very quickly. I never use Search to find or run programs.
    • I do miss the Apps view from Windows 8.1 Update.
    • I use the search function and little else since Windows 11 (but there are times where Saved Searches take precedence since the search feature on the Start menu is worse than before). I use other features in previous releases.
  • Recent Achievements

    • Collaborator
      lethalman went up a rank
      Collaborator
    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later
    • Week One Done
      Karan Khanna earned a badge
      Week One Done
    • First Post
      MikeK13 earned a badge
      First Post
  • Popular Contributors

    1. 1
      +primortal
      664
    2. 2
      ATLien_0
      262
    3. 3
      Michael Scrip
      212
    4. 4
      +FloatingFatMan
      168
    5. 5
      Steven P.
      156
  • Tell a friend

    Love Neowin? Tell a friend!