• 0

CSS: How to wrap a DIV around a circle?


 Share

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>

 

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 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; }

 

Link to comment
Share on other sites

  • 0

Thanks I know this is super complex. My original image with the DIV containing the rainbow, I'm actually looking to use a range control in place of the rainbow

Link to comment
Share on other sites

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
 Share

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By News Staff
      Pay What You Want for this Superstar Web Development & Design Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for this 2021 Superstar Web Development & Design Bundle. Over 150 Hours of Content on Web Development, Graphic Design, HTML, JavaScript and more! Explore the server-side of web design and development.



      Beat the average price to get the following courses as well:

      The Complete Web Development Course
      Become a Full-Stack Web Developer & Learn HTML5, CSS3, JS, ES6, and More

      Adobe XD Masterclass: UI/UX Design from Scratch
      The Most Complete Course to Get Started in UI/UX Design Using Adobe XD

      How to Become a UX Designer
      A Theory-Based Course for Anyone Who Would Like to Become a Designer

      Learn Full-Stack Web Development by Building a Blog
      Gain Insights on Angular, Bootstrap, ASP.NET Core & More

      CSS Web Development Crash Course
      Gain a Good Understanding of CSS Programming, Its Properties & Values

      Quick Frontend Website Creation: HTML, CSS, JavaScript & jQuery
      Create Websites Using HTML, CSS, JavaScript & jQuery

      Pay What You Want (as little as $1) for the following courses:

      Crash Course On Graphic Design
      Learn The Basics of Graphic Design & How to Use Pixlr

      HTML Web Development Crash Course
      Learn the Basics of Web Development, HTML Tags, CSS & JavaScript

      Here's the deal:
      The bundle represents an overall retail value of $1,592 Beat the average price and you'll take home the entire bundle. To unlock the full bundle is under $9.50 at the time of writing. Beat the Leader's price and get entered into the epic giveaway. Get the full Superstar Web Development & Design Bundle
      Not for you?
      That's OK, there are other deals on offer you can check out here.

      Ivacy VPN - 5 years at 87% off NordVPN - 2 years at up to 68% off Private Internet Access VPN - subscriptions at up to 79% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Giveaways: Apple Giveaway | Gaming Giveaway | Amazon Giveaway Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.


    • By News Staff
      Get the 25 Course for $25 Web Development Mega Bundle
      by Steven Parker



      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store where you can save 98% off this 25 Course for $25 Web Development Mega Bundle. All 25 courses for $1 each! Kickstart your career in web development and gain the fundamental expertise on AWS, Azure, CSS, HTML, Java, Python, and a lot more.

      This bundle consists of the following courses:

      AWS Deployment for Node.js Applications
      Deploy your Node.js Apps to the Amazon Web Service & Make Them Accessible Online Intro to MongoDB
      Get Acquainted with MongoDB & Discover How to Manage Data Like a Pro Intro to Next.js
      Get Started With a Minimalist Framework for Building Static, Server-Rendered React Apps Intro to RPG Development with Phaser
      Craft the Beginning of Your RPG by Learning the Basics in the Popular Phaser 3 HTML5 Framework JavaScript Foundations
      Learn JavaScript for Web & HTML5 Game Development Language Recognition AI with Unity & Azure
      Create a Vocal Recognition App by Using the Microsoft Cognitive Services Node.js & Express for Beginners
      Master the Basics of the JavaScript Runtime Node.js & Express Framework to Build Your Own APIs for Web Apps, Multiplayer Games, and More Node.js For Beginners: Create Server-Side Apps with JavaScript
      Build Fast Web Apps by Learning Node.js, the Server-Side Solution for JavaScript Python Foundations
      Learn the Foundations of Python for Data Science & Machine Learning Responsive Web Design for Beginners
      Master the Fundamentals of CSS & Create Responsive Websites for Any Screen Size The Complete Beginners JavaScript Course
      Begin Your Journey Into JavaScript by Studying the Basics & Mastering How to Use the Principles in Your Own Projects Intro to Bootstrap
      Learn Bootstrap, the Secret to Quickly Creating Professional & Attractive Websites + Web Apps Intermediate SQL: Create & Alter Databases
      Define Your Own Database from Scratch & Understand How to Apply It to Your Own Projects HTML5 Game Development for Beginners with Phaser
      Take a Hands-on Approach to Learning the Basics of Game Development with Phaser 3 Azure Deployment for Node.js Applications
      Discover How to Deploy Node.js Apps to Microsoft Azure & Make Them Accessible Online Beginning SQL: Store & Query Your Data
      Learn the Basics of SQLite & Start Sorting and Querying Your Data Like a Pro Build JavaScript Applications with Vue.js
      Master the Fundamentals of the Vue.js Framework & Build Scalable Applications with Organized, Easy-to-Read JavaScript Create Interactive Pages with Javascript & the DOM API
      Explore the DOM API, HTML5, & Advanced JavaScript Concepts by Building 3 Projects CSS Flexbox for Beginners
      Build Responsive Websites for Any Device Using CSS Flexbox CSS Foundations
      Enhance Website Aesthetics & Designs with the Style Sheet Language CSS Discover jQuery: Create Interactive Websites
      Gain the Tools & Skills Needed to Create Rich, Successful, and Professional-Grade Web Applications with jQuery Discover React for Web Applications
      Dive Into the UI-Oriented, JavaScript Library React to Create Data-Rich Web Apps with Complex UI Needs Git & Github: Version Control and Collaboration
      Discover How to Use Version Control to Keep a Clean History of Your Project & To Collaborate with Teams HTML & CSS
      Learn HTML & CSS from Scratch by Creating a Responsive Landing Page WebVR for Beginners: Build VR Websites with A-Frame
      Create VR Websites from Scratch! Here's the deal:
      This 25 Course for $25 Web Development Mega Bundle normally costs $2,475 but it can be yours for just $25 for a limited time, that's a saving of $2,450 (98%) off the price. For a full description, specs, and instructor info please click the link below.

      Get the 25 Course for $25 Web Development Mega Bundle
      98% off Instagram Growth Marketing Bundle
      Use Instagram to Your Advantage & Effectively Grow Your Brand with 15 Hours of Content on Marketing, Following, Monetizing, and More

      Get the Instagram Growth Marketing Bundle for $19.99 (list price $1,200 )

      Not for you?
      That's OK, there are other deals on offer you can check out here.

      Ivacy VPN - 5 years at 87% off NordVPN - 2 years at up to 68% off Private Internet Access VPN - subscriptions at up to 79% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Giveaways: Apple Giveaway | Gaming Giveaway | Amazon Giveaway Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.

    • By Usama Jawad96
      Chrome 93 is landing today, removes 3DES encryption support in TLS, adds WebOTP on desktop
      by Usama Jawad

      Chrome 92 made its way to the Stable channel back in July, deprecating payment handler configurations and enhancing Progressive Web Apps (PWAs), among many other things. Today, Chrome 93 will be landing for the public. Apart from the features and enhancements that it brings, this Chrome release is also significant because it's the last version in Google's regular release cadence. Starting with Chrome 94 next month, the company will shift to a four-week release cycle.



      Starting with deprecations, Chrome 93 is removing support for the 3DES cipher block chaining (CBC) cipher suite in Transport Layer Security (TLS). Google has cited a number of reasons for this including the fact that newer and better AES-based replacements have been available for the past couple of decades. 3DES is also vulnerable to the Sweet32 attack, and is extremely slow, battery-consuming, and CPU-intensive, especially on mobile platforms. Furthermore, many of its implementations leak the cache and timing side channels. In the same vein, Google is also blocking connections to HTTP, HTTPS, and FTP servers on port 989 and 990. This is because of security reasons and is a mitigation to the ALPACA attack.

      Google is further enhancing Chrome by allowing web apps to identify themselves as note-taking apps when needed, which will also allow for OS-level integrations. The Multi-Screen Window Placement API is being enhanced to cater to productivity use-cases where having Chrome utilized across multiple screens will result in a better experience. Support for the WebOTP API has been initiated for Chrome on desktop too, as it will allow developers to retrieve one-time passwords (OTP) sent via SMS in a specific format and sync them across Chrome on Android and desktop, provided that you are signed in to the same Google account. Given the increasing popularity of SVG images, the Clipboard API now supports this format too. Similarly, with browser vendors now adding playback speed controls in their offerings, Chrome is giving companies a way to enable and disable this control when playing media on their website.

      Apart from all of the above, Google has a ton of developer-facing capabilities present in Chrome 93 too. A CSS property is being added to change the color of form controls, the "style" keyword is being added to the "contain" property again, support for CSS Module Scripts is being added, the AbortSignal.abort() static factory method is being introduced to make the life of developers easier, and the meta element's "media" attribute will now be honored so developers can shift between the theme colors of their website using a media query. In the same vein, the CSS flex box and flex items will obey the keywords for positional alignment put forward in the W3C document here.

      Furthermore, a new boolean property called Object.hasOwn is being introduced which is an easier-to-use implementation of the Object.prototype.hasOwnProperty static method. Chrome 93 will also utilize the ICU LocaleMatcher to implement the BestFitMatcher which is used in JavaScript engine v8 to match locale data. Similarly, the Error() constructor now has an optional parameter called "cause" which will allow errors to be chained without requiring much development effort. Finally, a set of new HTTP Client Hints headers are being offered across the user media preference features, allowing websites to make "smarter" choices regarding the visual properties of the website based on headers.

      Chrome 93 is expected to roll out later today. If it does not update to version 93 automatically for you throughout the course of the day, head over to Help > About Google Chrome to trigger the update once it becomes available. Next up is Chrome 94 which is currently in the Beta channel with a Stable release expected on September 21, which is in three weeks' time. With Chrome 94, Google will be moving to a four-week release cycle for subsequent Chrome releases.

    • By hellowalkman
      Here's how you can try a bit of Windows 11 without downloading it, thanks to Blue Edge
      by Sayan Sen

      A developer named Blue Edge has created a Windows 11 inside a browser simulation dubbed "Windows 11 in React" using ReactJS, SCSS, CSS. The website allows you to experience what the GUI of the home screen in the next-gen OS looks like to a very limited degree. For example, you can do some basic interaction on it, like launching the Start menu, opening the Edge browser, launching the Microsoft Store, and more.

      Interestingly, when you try to run the File Explorer inside Blue Edge's Windows 11 in React, it opens up to a "Coming Soon" webpage indicating that perhaps more additions will be made to it later although it will still most likely be a limited experience since there is only so much one can do to simulate an entire OS as big as Windows 11 within a browser.

      Overall, it looks like a fun little toy to play around with but do not expect to be wooed away by it in comparison to what it's like to have the actual full OS experience. For those interested, you can try the Windows 11 in React by Blue Edge through the following link: https://win11.blueedge.me

      You can also learn more about it on GitHub here.

      via The Windows Club

    • By Steven P.
      Pay What You Want for the Superstar Web Development & Design Bundle
      by Steven Parker

      Today's highlighted deal comes via our Online Courses section of the Neowin Deals store, where you can Pay What You Want for this 2021 Superstar Web Development & Design Bundle. Over 150 Hours of Content on Web Development, Graphic Design, HTML, JavaScript and more! Explore the server-side of web design and development.



      Beat the average price to get the following courses as well:

      The Complete Web Development Course
      Become a Full-Stack Web Developer & Learn HTML5, CSS3, JS, ES6, and More

      Adobe XD Masterclass: UI/UX Design from Scratch
      The Most Complete Course to Get Started in UI/UX Design Using Adobe XD

      How to Become a UX Designer
      A Theory-Based Course for Anyone Who Would Like to Become a Designer

      Learn Full-Stack Web Development by Building a Blog
      Gain Insights on Angular, Bootstrap, ASP.NET Core & More

      CSS Web Development Crash Course
      Gain a Good Understanding of CSS Programming, Its Properties & Values

      Quick Frontend Website Creation: HTML, CSS, JavaScript & jQuery
      Create Websites Using HTML, CSS, JavaScript & jQuery

      Pay What You Want (as little as $1) for the following courses:

      Crash Course On Graphic Design
      Learn The Basics of Graphic Design & How to Use Pixlr

      HTML Web Development Crash Course
      Learn the Basics of Web Development, HTML Tags, CSS & JavaScript

      Here's the deal:
      The bundle represents an overall retail value of $1,592 Beat the average price and you'll take home the entire bundle. To unlock the full bundle is under $10 at the time of writing. Beat the Leader's price and get entered into the epic giveaway. Bid for the full Superstar Web Development & Design Bundle
      Not for you?
      That's OK, there are other deals on offer you can check out here.

      Ivacy VPN - 5 years at 87% off NordVPN - 2 years at up to 68% off Private Internet Access VPN - subscriptions at up to 79% off Unlocator VPN or SmartDNS - unblock Geoblock with 7-day free trial Subscribe to Neowin - for $14 a year, or $28 a year for Ad-Free experience Giveaways: Apple Giveaway | Gaming Giveaway | Amazon Giveaway Neowin Deals · Free eBooks · Neowin Store

      Disclosure: This is a StackCommerce deal or giveaway in partnership with Neowin; an account at StackCommerce is required to participate in any deals or giveaways. For a full description of StackCommerce's privacy guidelines, go here. Neowin benefits from shared revenue of each sale made through our branded deals site, and it all goes toward the running costs.