• 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

    • It's a Developer Beta 1 not even a Public or User Beta, I doubt any of the design is 100% finalized yet.
    • Was going to comment the same thing. It's SO annoying to have to go back to settings every time I install something new or some apps like discord update and the icon is hidden again.
    • XRECODE3 1.167 by Razvan Serea xrecode3 is a converter and audio-grabber which allows you to convert from mp3, mp2, wma, aiff, amr, ogg, flac, ape, cue, ac3, wv, mpc, mid, cue ,tta, tak, wav, wav(rf64), dts, m4a, m4b, mp4, ra, rm, aac, avi, mpg, vob, mkv, mka, flv, swf, mov, ofr, wmv, divx, m4v, spx, 3gp, 3g2, m2v, m4v, ts, m2ts, adts, shn, tak, xm, mod, s3m, it, mtm, umx, mlp to m4a, alac, ape, flac, mp3, mp4 (using NeroAAC), ogg, raw, wav, wav(rf64), wma, WavPack, mpc, mp2, Speex, ofr, ac3, aiff, tak, snd and Shorten formats. Command Line parameters are supported. XRECODE3 features: Works on XP, Vista, Windows 7, Windows 8, 10 32/64 bit versions and under Wine. Parallel conversion by utilizing power of multi-core CPUs. Support of embedded CUE sheets (for FLAC, WavPack, APE and TAK files). Support of mp4, mka chapters (can split mp4, mka by chapters to any supported format). Built-in Metadata editor with Cover Art support. Has support for LossyWav. Supports portable mode. Merge input files to one large audio file and create CUE sheet. Converting to many formats at once using "Multiple" output mode. Grabbing of multi-channel Audio CDs to the desired format at once. Informative and resizable UI suited even for netbooks. Extracting audio from flv, avi, mov etc. video files (multiple audio streams are supported). Can export/import Metadata to/from external file. Support for 24/32bit audio files. Multilanguage support. Currently program is available in Dutch, English, French, Japanese, Korean, Polish, Russian, Hungarian, Italian, Spanish, Spanish Traditional, Swedish, Brazilian Portuguese, German, Finnish, Bulgarian, Czech, Danish and Chinese (simplified) languages. What's new in XRECODE3: Native 64bit support. Added support for DSD/DST and DFF formats (including handling of SACD ISOs). Added option to extract audio without transcoding. Added option to encode several files to one multi-channel file. Added option to split file into individual track-per-channel for all available output formats. Added option to merge files per folder. Output and Metadata settings are now output format specific. Enhanced Metadata settings. Added support for multiple Cover pictures in Metadata editor. Added 32bit int/float output for formats which support them (e.g. WAV). Added dithering option in Output Settings. Added option to use EBUR128 in Normalize. Added option to Album Mode Normalize. Added option to configure Matrices under Output Settings. Added more output file pattern elements. Tabbed UI. CUE files are now displayed more nicely. Enhanced Shell Extension. XRECODE3 1.167 changelog: Added option to handle YEAR and DATE tags (under Settings/Metadata/Advanced). Updated to the latest qaac (2.85). Download: XRECODE3 v1.167 (64-bit) | Portable | ~30.0 MB (Shareware) Download: XRECODE3 v1.167 (32-bit) | Portable Link: XRECODE3 Homepage | XRECODE3 Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Hasleo Disk Clone 5.2.2.1 by Razvan Serea Hasleo Disk Clone is a free and all-in-one disk cloning software for Windows 11/10/8/7/Vista and Windows Server that can help you migrate Windows OS to another disk, clone one disk to another disk or clone one partition to another location quickly and efficiently. Completely Free Windows Migration and Disk/Partition Cloning Software Migrate Windows from one disk to another without reinstalling Windows, apps. Clone one disk to another and makes the data on 2 disks are exactly the same. Clone a partition to another location without losing any data. Easily adjust the size and location of the destination partition. Convert MBR to GPT or convert GPT to MBR by cloning. Creation of Windows PE emergency disk. Extremely fast cloning speed and multi-language support. Supported OS: Windows Vista/Server 2008 or later, fully compatible with GPT and UEFI. Note: Hasleo Disk Clone 5.2.2.1 changelog is not yet available. Download: Hasleo Disk Clone 5.2.2.1 | 28.8 MB (Freeware) Link: Hasleo Disk Clone Home Page | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Shouldn't using "High Performance" mode prevent c-states from initializing? Maybe AMD hasn't built a proper power plan for their x3d processors like they used to for their ryzen chips.
  • Recent Achievements

    • First Post
      Johnny Mrkvička earned a badge
      First Post
    • Week One Done
      viraltui earned a badge
      Week One Done
    • One Month Later
      serfegyed earned a badge
      One Month Later
    • Dedicated
      firey earned a badge
      Dedicated
    • Dedicated
      fettermanj earned a badge
      Dedicated
  • Popular Contributors

    1. 1
      +primortal
      629
    2. 2
      ATLien_0
      227
    3. 3
      Michael Scrip
      218
    4. 4
      Xenon
      149
    5. 5
      Steven P.
      140
  • Tell a friend

    Love Neowin? Tell a friend!