The CSS linear gradients rainbow wheel is missing a few sections, only displaying part of its 12

I've almost got everything working, but I'm facing a challenge in displaying all 12 sections of the rainbow wheel. I know it's probably something very simple (Occam's razor). I've been following this amazing tutorial on CSS linear gradients: Delve deep into the world of CSS linear gradients but I seem to stumble at the final hurdle.

Check out my Codepen here for a working example: https://codepen.io/snarf1974/pen/aywZZJ

body { background: white; } 
.colorWheel {
  position: relative;
  margin: 1em auto;
/*   border: solid 2em white; */
  width: 16em; height: 16em;
  border-radius: 50%;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: 
    linear-gradient(30deg, #9bcb61 36.78%, transparent 36.78%),
    linear-gradient(60deg, #f6e04e 68.41%, transparent 68.41%);
  /* More linear gradient styles... */

  background-repeat: no-repeat;
  background-size: 50% 50%;
}
.colorWheel:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -7em;
  width: 14em; height: 14em;
  border-radius: 50%;
  background: white;
  content: '';
}

.center {
  text-align: center;
        position: absolute;
        top: 22%;
        transform: translateY(-50%);
        padding: 1.5em;
        font-size: 1.4em;
      font-color: black;
      z-index: 1;
      -ms-transform: rotate(315deg);
        transform: rotate(315deg);
}

If anyone can shine some light on this issue, it would be greatly appreciated!

Answer №1

It appears that there are only 11 colors mentioned in your query: pink, yellow, cyan, orange, green, lawngreen, red, fuchsia, black, hotpink, purple.

I made a modification by inserting this code snippet before the lawngreen section:

linear-gradient(30deg, transparent 63.61%, blue 31.59%) 100% 100%,

body { background: white; }

.colorWheel {
  position: relative;
  margin: 1em auto;
  /* border: solid 2em white; */
  width: 16em; height: 16em;
  border-radius: 50%;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: 
    linear-gradient(30deg, #9bcb61 36.78%, transparent 36.78%) 0 0,
    linear-gradient(60deg, #f6e04e 63.22%, transparent 63.22%) 0 0,
    linear-gradient(90deg, #f4c64d 100%, transparent 100%) 0 0,
    linear-gradient(-30deg, #f0463e 36.78%, transparent 36.78%) 100% 0,
    linear-gradient(-60deg, #f57d42 63.22%, transparent 63.22%) 100% 0,
    
    linear-gradient(30deg, transparent 63.22%, #c14273 63.22%) 100% 100%,
    linear-gradient(60deg, transparent 36.78%, #86489b 36.78%) 100% 100%,
    linear-gradient(90deg, transparent 0%, #008fca 0%) 100% 100%,
    linear-gradient(-30deg, transparent 63.22%, #82ba75 63.22%) 0 100%,
    linear-gradient(-60deg, transparent 36.78%, #00b8a9 36.78%) 0 100%,
    
    #f9a260 linear-gradient(#00bced, #00bced) 50% 100%;
  background-repeat: no-repeat;
  background-size: 50% 50%;
}

.colorWheel:after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -7em;
  width: 14em; height: 14em;
  border-radius: 50%;
  background: white;
  content: '';
}

.center {
  text-align: center;
  position: absolute;
  top: 22%;
  transform: translateY(-50%);
  padding: 1.5em;
  font-size: 1.4em;
  font-color: black;
  z-index: 1;
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
}
<div class='colorWheel'>
  <div class='center'>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I generate rotating images using jQuery or JavaScript similar to the one shown here?

http://www.example.com/ On a website similar to example.com, I noticed that when hovering over one of the topics listed, the image rotates. I am interested in creating this interactive effect using either jQuery or JavaScript. Is there a method to access ...

Arrange elements within a div using Bootstrap

I have been struggling to align items within a div tag and despite trying various methods, I have not been successful. . Here is the current structure of my code: https://i.stack.imgur.com/t9PAj.png I attempted to use flexbox, but encountered an issue ...

Bringing together embedded chat and stream seamlessly with CSS styling

I'm in the process of integrating a chat feature with my Twitch stream on a Xenforo forum page. I aim for the stream to be displayed in 16:9 aspect ratio to ensure high definition quality, and I want it to adapt to the user's screen resolution. B ...

My Django function doesn't get triggered by the form submission using post method

I'm facing a frustrating dilemma and issue. Currently, I am working on a form written in HTML using Django, which is meant to update information in my database related to the specific page it is on. The problem lies in the fact that the Django termi ...

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle link: http://jsfiddle.net/lokapujya ...

CSS Flexibility

Greetings everyone, it's been a while since I dabbled in web development. I recently worked on my site with the intention of making it responsive using flexbox. This is my first time posting here, so please guide me on how to seek help more effective ...

Having trouble with CSS media queries not functioning properly on Internet Explorer version 9?

Incorporated media queries in my design to adjust the width of certain elements on the page according to the browser's width. These are the queries I am using: @media screen and (min-width:1024px) @media screen and (max-width:1024px) Chrome, Safari, ...

What is the most efficient method for clearing the innerHTML when dealing with dynamic content?

Is there a more efficient method for cleaning the innerHTML of an element that is constantly changing? I created a function to clean the containers, but I'm not sure if it's the most efficient approach. While it works with the specified containe ...

What is the best way to make the background repeat seamlessly all the way across the screen horizontally?

Currently, I have set up an image as a background on my website. It's just a few pixels wide so I made it repeat across the screen width using CSS. However, I noticed that it stops slightly before reaching the right side of the browser window (around ...

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

The functionality of the Ajax code is taking an unusually long time

After running my Ajax code, it took a surprising 3 minutes and 15 seconds to load. What could be causing this delay? <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.j ...

The <div> tag fails to comply with the Display: inline CSS property

I need help with a web development issue as I am new to this field. My problem is that I am trying to display three divs next to each other, but despite applying display:inline-block to them, they still appear stacked on top of each other instead of side b ...

Stop a single piece of data from continuously cycling

<?php include ("config.php"); $results = $mysqli->query (" SELECT orders_history.transaction_id, orders_history.items, orders_history.quantity, orders_history.on ...

Alignment of text to the left can be achieved by using either relative or absolute

After researching several solutions, none seem to solve the issue I am experiencing. My code is meant to create two red colored boxes as shown below: .redboxes-horz { width: 100%; margin-bottom: 50px; height: auto; top: 0; right: 0; } ...

The HTML image tag is malfunctioning on a Windows system

I'm currently updating an HTML page and trying to add an image using the img tag. <img src="file:///C:/wamp/www/images/Sat.png" class="img-circle" alt="User Image"/> However, it doesn't seem to be working! ...

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

Update the JavaScript and CSS files following an AJAX request with $.get

I am encountering an issue where my global CSS and JS files contain all the necessary definitions, but when I load new HTML blocks via AJAX $.get, these new elements do not receive the correct CSS/JS definitions. Is there a convenient way to refresh the ...

Resizable Bootstrap column-md-4

I need to make a bootstrap column fixed position (col-md-4). This is for a shop layout with 2 columns: Shop content (long & scrollable) col-md-8 Cart content (short & fixed so it stays visible while scrolling the shop content) col-md-4 I'm ...

Resolved the z-index problem with the header and sidebar placement

Hello there! I have come across an issue that I need some help with. I have a fixed sidebar and header on my website, both of which have drop shadows applied to them. However, I don't want the header to cast a shadow on the sidebar as I want them to ...

Why does the variable in throw new exception print instead of the variable value being printed?

<div style="text-align: left;"> <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>"> Name:<input type="text" name="name"><br> Age:<input type="text" name="age"> <br> ...