Is it possible to create a button that, when clicked, displays a circular zone div using CSS only?
It should look like this:
https://i.sstatic.net/BFFs1.png
I would like the red div to look like the image above. Can this be accomplished with CSS alone?
If you want to generate circles dynamically, I recommend utilizing javascript. By creating a function with adjustable parameters, you can easily create circles as shown below.
function generateDynamicCircles(parentDiameter, innerCircleDiameter, innerCirclesCount) {
var pi = Math.PI,
n = innerCirclesCount,
parentRadius = parentDiameter / 2,
innerRadius = innerCircleDiameter,
angle = (2 * pi / n),
parentCircle = $('<div class="circle"></div>').css({
width: parentRadius * 2 + 'px',
height: parentRadius * 2 + 'px'
})
for (var i = 0; i < 2 * pi; i += angle) {
var innerCircle = $('<div class="inner"></div>');
innerCircle.css({
left: parentRadius - innerRadius / 2 + parentRadius * Math.cos(i) + 'px',
top: parentRadius - innerRadius / 2 + parentRadius * Math.sin(i) + 'px',
width: innerRadius + 'px',
height: innerRadius + 'px'
});
parentCircle.append(innerCircle);
}
$('body').append(parentCircle);
}
generateDynamicCircles(100, 20, 6);
generateDynamicCircles(250, 50, 13);
generateDynamicCircles(400, 100, 10).circle {
background: #546E7A;
border-radius: 50%;
margin: 100px 50px;
position: relative;
}
.inner {
border-radius: 50%;
background: red;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Today I completed my anticipated outcome. Here is the code I used:
<style>
.circle-wrapper {
width : 500px;
height : 500px;
border-radius: 50%;
background: #eee;
position: relative;
margin: 100px;
}
.circle {
display: block;
position: absolute;
top:50%;left: 50%;
width:100px;height:100px;margin: -50px;
background: red;
border-radius: 50%;
text-align: center;
line-height: 100px;
}
.deg-0 { transform: translate(250px) }
.deg-45 { transform: rotate(45deg) translate(250px) rotate(-45deg); }
.deg-90 { transform: rotate(90deg) translate(250px) rotate(-90deg); }
.deg-135 { transform: rotate(135deg) translate(250px) rotate(-135deg); }
.deg-180 { transform: rotate(180deg) translate(250px) rotate(-180deg); }
.deg-225 { transform: rotate(225deg) translate(250px) rotate(-225deg); }
.deg-270 { transform: rotate(270deg) translate(250px) rotate(-270deg); }
.deg-315 { transform: rotate(315deg) translate(250px) rotate(-315deg); }
</style>
<div class="circle-wrapper">
<div class="circle deg-0">0</div>
<div class="circle deg-45">45</div>
<div class="circle deg-90">90</div>
<div class="circle deg-135">135</div>
<div class="circle deg-180">180</div>
<div class="circle deg-225">225</div>
<div class="circle deg-270">270</div>
<div class="circle deg-315">315</div>
</div>
Feel free to check out my fiddle https://jsfiddle.net/3sbu2ecc/
Today I had a strange encounter on my website LiveGreen Whenever I hover over the Menu Services, the dropdown menu goes under the image section below it. I've tried every possible solution like adjusting positioning and z-index, and searched extensiv ...
When accessing my website using Google Chrome, Safari, and Internet Explorer from different computers in various locations, I noticed that certain links do not work properly. Surprisingly, these links function perfectly when using Firefox. For instance, o ...
$("input").keydown(function(event){ if(event.keyCode === 13){ return false; } }); I need to prevent the default action when the "enter" key is pressed in any of my text input fie ...
I attempted to hide the #div element using CSS: #div{ display: hide; } However, the method did not work as expected. ...
My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...
I am trying to create a layout where two columns overlap or cover each other. The layout should consist of one column on the left side (6 columns) and one on the right side (6 columns). The desired result is to have: left side (8 columns) and right side ...
I am facing a minor issue with the JavaScript onClick function. I need a function that will target a specific class, like .modal. Currently, it looks like this <div class="modal" onclick="modalFix()"> <p>here is some text</p> </div> ...
A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...
Before, I was including Tailwind using a CDN. Now, I have installed it with npm and all three .css files are included, but the styles are not appearing in my HTML document. Here is the directory structure and a link to style.css The content of tailwind.c ...
This is the new visual design I received: https://i.stack.imgur.com/kiQGe.png The label CLG is represented as a label, with the line being an input type=tel. Disregard the purple overlay... The designer has requested that I remove the border when a user ...
I'm trying to display two sets of data in a single cell with ag-grid, but I want the data to be on separate lines like this instead: Data with break line I attempted to use "\n", "\r", and "\br" but it didn't work. Here is my code ...
Creating a text tracking (letter-spacing) demonstration where range sliders are used to update CSS properties. I'm looking to improve the functionality so that the labels also update dynamically, without repeating output2.textContent = this.value;. An ...
I'm faced with a challenge involving a reusable React list component that supports nested children. My goal is to visually connect the parent div to its direct children using arrows, similar to the image linked below. View List Component Image Below ...
Even though I believe I'm following the correct steps, I am facing an issue where the graph displaying real-time database values is not showing up. The first image shows my real-time database and a demostration as shown in images 2 and 3. While the da ...
I currently have a basic datalist drop-down menu and I am looking to customize the CSS to match the style of other fields on my website. However, as someone new to web design, I am unsure of how to go about this process. Check out the code here: http://j ...
.hovereffect a.info,.hovereffect h2{text-transform:uppercase;color:#fff} .hovereffect{float:left;position:relative;cursor:default} .hovereffect .overlay{position:absolute;top:0;left:0;opacity:0;background-color:none;-webkit-transition:all .4s ease-in-out ...
After spending hours following various tutorials and exploring previously asked questions, I am struggling to make this work. My HTML page looks like this: <!DOCTYPE html> <html> <head> <link type="text/css" rel="styleshee ...
I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was This element is not visible because it has CSS property: position: fixed and it&ap ...
I have been working on improving the load time of my website as it was quite lengthy, but even after optimizations, I am facing issues specifically with the jQuery UI CSS images. If you could spare a moment, would you mind taking a look at this Pingdom te ...
I recently came across a method to extract image links from HTML img tags using the Html Java library. It requires using the fromHtml method. After pulling some HTML code from an RSS feed, I wanted to display the images it contained. The code snippet belo ...