• 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 haven't looked at this in a long time, but it seems to me that outside of a couple of 1st tier vendors, most didn't put the effort in, and we got the generic windows device images. When they did provide the info, it was cool and made it easier to identify devices, but most I dealt with did not, so it had limited usefulness to me.
    • Was really hoping they'd find a way to build this around the Ryzen AI Max+ 395 (or similar) silicon.
    • "running optimized Windows 11 versions" That will be key but I think it is just allowing the new launcher to be the GUI on bootup vs anything else. This thing uses the same hardware as the current ASUS ROG Ally devices, which is not as powerful as an Xbox Series S, but twice the cost.
    • AB Download Manager 1.6.4 by Razvan Serea AB Download Manager is an open-source, feature-rich download manager designed to accelerate downloads, organize files efficiently, and provide seamless control over downloads. With support for multiple connections, resume capability, and an intuitive interface, it enhances the downloading experience for users seeking speed and reliability. The software integrates with various browsers, enabling quick link grabbing and batch downloading. It supports HTTP, HTTPS, and FTP protocols, ensuring broad compatibility with different file sources. Users can schedule downloads, set speed limits, and categorize files automatically for better organization. AB Download Manager is lightweight yet powerful, making it a great alternative to proprietary download managers. Its open-source nature allows developers to contribute, customize, and improve the software as needed. Whether you're downloading large files, managing multiple downloads at once, or seeking an ad-free experience, this tool offers a practical and efficient solution. Key features of AB Download Manager: Multi-Connection Support – Accelerates downloads by splitting files into multiple segments. Resume Capability – Allows paused or interrupted downloads to be resumed without starting over. Batch Downloading – Supports downloading multiple files at once for improved efficiency. Browser Integration – Captures download links directly from browsers for seamless operation. HTTP, HTTPS, and FTP Support – Ensures compatibility with a wide range of file sources. Download Scheduling – Enables users to automate downloads at specific times. Speed Limiting – Lets users control bandwidth usage for optimized performance. File Categorization – Automatically organizes downloaded files into designated folders. User-Friendly Interface – Simple and intuitive design for easy navigation. Cross-Platform Compatibility – Works on multiple operating systems. Ad-Free Experience – No intrusive ads or tracking for a clean user experience. AB Download Manager 1.6.4 changelog: Added Queues are now visible on the home page, next to the categories (#661) In-app update is now supported on macOS (#627) New option to enable the native menu bar on macOS (#646) Fixed macOS: Window now activates properly when "Show Downloads" is clicked from the system tray (#632) Linux: Startup desktop entry now includes an icon (#634) An issue where the "Edit Download" page could unintentionally change the download status (#641) Queue status not updated properly sometimes (#663) Improved Translations updated Minor UI improvements Download: AB Download Manager 1.6.4 | Portable | ~80.0 MB (Open Source) Links: AB Download Manager Website | Github Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Dedicated
      Epaminombas earned a badge
      Dedicated
    • Veteran
      Yonah went up a rank
      Veteran
    • First Post
      viraltui earned a badge
      First Post
    • Reacting Well
      viraltui earned a badge
      Reacting Well
    • Week One Done
      LunaFerret earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      480
    2. 2
      +FloatingFatMan
      264
    3. 3
      snowy owl
      232
    4. 4
      ATLien_0
      231
    5. 5
      Edouard
      171
  • Tell a friend

    Love Neowin? Tell a friend!