• 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

    • This is the curse of Linux on the desktop, the development and maintenance manpower is spread out across countless distributions. The same thing has to be integrated many times.
    • The new official logo of the GOP
    • Linux 6.16-rc1 is out: What's new and what does it mean for your system? by Paul Hill Linus Torvalds, head and founder of the Linux kernel, has announced the closure of the merge window where major new features are added to the kernel, and the beginning of the Linux 6.16 release candidates, beginning with release candidate 1 (Linux 6.16-rc1). Linux 6.15 was released two weeks ago and in the time since, developers have had the opportunity to try and get their new kernel features into the Linux 6.16 kernel. Over the next two months, we will get seven or eight release candidates where developers will stabilize new and existing features. This means that the stable version of Linux 6.16 will arrive around the end of July. Torvalds said that the merge window seemed pretty normal this time, but did say he had a feeling that there were more “late straggler” pull requests than is typical. Despite this, everything seems to be fine and the schedule will be going forward as planned. Key areas of development Torvalds explained that around half of the changes in the first release candidate were driver updates, with the bulk of those being made up with by GPU and networking drivers. For end users these are the most important changes because when your favorite distribution of Linux ships a new release with this kernel, it will support more graphics cards and networking equipment like Wi-Fi cards. The non-driver updates in this version are split between architecture-specific updates, documentation and tooling (perf tool and selftests), and core changes to filesystems, core kernel, memory management, and networking. Torvalds said the core changes include some of the “most important” changes, though they’re not necessarily major changes. Fixes to the core ensure a more stable Linux kernel for end users, plus better performance. The merge window saw developers submit thousands of non-merge commits and merges. The non-merge commits were around 13,000 while the merge commits nearly reached 1,000. There were 1,783 unique authors submitting code during this window. Next steps Over the coming weeks, Linux developers, including individuals or representatives of companies, will submit bug fixes for new and existing features. This release candidate cycle will run until around the end of July and then the final version will become available. End users shouldn’t go out and download Linux 6.16 when it’s released, instead just wait for your Linux distribution to update to it, as distribution-specific changes get made. Neowin will be following these releases and reporting on any interested changes that are noted. Source: LKML
    • There was no cancelation. Microsoft delayed work on it to focus on further tuning the OS and improving the OS experience overall, before going full core into a direct hardware battle with their partners.
  • Recent Achievements

    • Week One Done
      Al_ earned a badge
      Week One Done
    • Week One Done
      MadMung0 earned a badge
      Week One Done
    • Reacting Well
      BlakeBringer earned a badge
      Reacting Well
    • Reacting Well
      Lazy_Placeholder earned a badge
      Reacting Well
    • Dedicated
      Epaminombas earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      474
    2. 2
      +FloatingFatMan
      273
    3. 3
      ATLien_0
      242
    4. 4
      snowy owl
      211
    5. 5
      Edouard
      182
  • Tell a friend

    Love Neowin? Tell a friend!