One of my first css intensive projects, having trouble getting everything lined up how I'd want it to.
How it is and what I want to achieve
The second section is ignoring the overblown 600% image and going right after the previous container (obviously).
I tried setting the .container-stars height to 600%, but that does literally nothing.
Tried using px or vh units, but it messes with the SVG paths, where they ignore the absolute top: 0; and move to the middle (I imagine it's because of the height: 100% somehow, but I can't set it to specific units because then it wouldn't be responsive anymore)
When I set the .container-stars to height: 600vh
.container-stars {
position: relative;
width: 100vw;
height: 100%;
margin-top: 20%;
background: linear-gradient(to bottom, $background 5%, white 40%, transparent 100%, $background 90%);
.path_left {
top: 0;
left: 0;
width: 45%;
height: 100%;
fill: $background;
}
.path_right {
position: absolute;
width: 45%;
height: 100%;
top: 0;
right: 0;
transform: scaleX(-1);
fill: $background;
}
.img_stars {
position: absolute;
background-image: url('/img/stars-1654074_1920.jpg');
top: 0;
left: 0;
width: 100%;
height: 600%;
repeat: repeat-y;
z-index: -1;
}
}
#content {
position: relative;
width: 100vw;
margin-top: 0%;
h2 {
position: absolute;
font-family: $primary-font;
font-size: calc(2vw + 0.5rem);
top: 0;
background: green;
display: block;
transform: translate(0, 50%);
color: #fff;
}
}
<section class="container-stars">
<svg class="path_left" width="450" height="600" viewBox="0 0 450 600">
<path d="M 0 600 C 260 327 202 133 450 0 L 0 0"></path>
</svg>
<svg class="path_right" width="450" height="600" viewBox="0 0 450 600">
<path d="M 0 600 C 260 327 202 133 450 0 L 0 0"></path>
</svg>
<div class="img_stars"></div>
</section>
<section id="content">
<h2>...matter, energy, time and space came into being</h2>
</section>
Would also appreciate any tips if someone has a better way to achieve this.
Troubleshooting whilst trying to maintain responsiveness can really be a pain.
Related
I'm trying to create what is in essence the reverse of a CSS clip-path. When using clip-path, an image or div is clipped so that only the shape you specify remains and the rest of the background is effectively deleted.
I would like it so that if I clip a shape it basically punches a hole in the upper most layer and removes the shape, not the background. Is this possible? I'd also be open to an SVG solution, but I am new to SVG so be kind :)
Basically, in the code below I have a blue square positioned absolutely inside a red square and want to be able to punch a shape out of the blue square so the red layer below shows through where the shape used to be. In reality there will an image as the background layer, so I can't accept a pseudo effect that mimics what I want but doesn't actually punch the shape out.
Any assistance would be amazing!
codepen: https://codepen.io/emilychews/pen/GQmyqx
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: red;
}
#innerbox {
width: 100%;
height: 100%;
background: blue;
top: 0;
left: 0;
position: absolute;
}
<div id="box">
<div id="innerbox"></div>
</div>
You can put the image above the blue part and you apply the clip-path on it then the result will be the same as if you have created a hole inside the blue part to see the image below:
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: blue;
}
#innerbox {
background: url(https://picsum.photos/400/400/) center/cover;
position: absolute;
inset: 0;
z-index:1;
clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
}
<div id="box">
<div id="innerbox"></div>
</div>
Another idea is to consider multiple background and you will have better support than clip-path and also less of code:
body {
height: 100vh;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background:
linear-gradient(to bottom right,#0000 49%,blue 50%) bottom/100% 60%,
linear-gradient(to top right,#0000 49%,blue 50%) top/100% 60%,
linear-gradient(blue,blue) left/20% 100%,
url(https://picsum.photos/400/400/) center/cover;
background-repeat:no-repeat;
}
<div id="box">
</div>
UPDATE
If you want some opacity, here is an idea where you have to duplicate the content using clip-path (a drawback):
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: blue;
}
#innerbox,#innerbox-2 {
background: url(https://picsum.photos/400/400/) center/cover;
position: absolute;
inset: 0;
z-index:2;
}
#innerbox {
/* if you initially planned to have x opacity so you need to set 1-x here*/
opacity:0.4;
}
#innerbox-2 {
z-index:1;
clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
animation:animate 5s linear alternate infinite;
}
#keyframes animate {
from {
clip-path:polygon(10% 10%, 10% 90%, 90% 50%);
}
to {
clip-path:polygon(20% 50%, 90% 50%, 80% 10%);
}
}
<div id="box">
<div id="innerbox">
<h1>Title</h1>
<p>Some content</p>
</div>
<div id="innerbox-2">
<h1>Title</h1>
<p>Some content</p>
</div>
</div>
UPDATE 2
You can consider SVG to do your initial requirement. Simply use an SVG instead of a div where you will have a mask.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: blue;
background: url(https://picsum.photos/400/400/) center/cover;
}
#innerbox {
position: absolute;
inset: 0;
z-index:1;
}
<div id="box">
<svg viewBox="0 0 200 200" id="innerbox" preserveAspectRatio="none">
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- the hole defined a polygon -->
<polygon points="20,20 20,180 180,100 " fill="black"/>
</mask>
</defs>
<!-- create a rect, fill it with the color and apply the above mask -->
<rect fill="blue" width="100%" height="100%" mask="url(#hole)" />
</svg>
</div>
You can also use the same SVG as background:
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: blue;
background: url(https://picsum.photos/400/400/) center/cover;
}
#innerbox {
position: absolute;
inset: 0;
z-index:1;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><defs><mask id="hole"><rect width="100%" height="100%" fill="white"/> <polygon points="20,20 20,180 180,100 " fill="black"/></mask></defs><rect fill="blue" width="100%" height="100%" mask="url(%23hole)" /></svg>');
}
<div id="box">
<div id="innerbox"></div>
</div>
Update 3 (what I recommend in 2020)
You can use CSS mask to get the effect you want with mask-composite
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://picsum.photos/400/400/) center/cover;
}
#innerbox {
position: absolute;
inset: 0;
-webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%;
mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%;
background: blue;
}
<div id="box">
<div id="innerbox"></div>
</div>
And the inverted version using the same shape
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://picsum.photos/400/400/) center/cover;
}
#innerbox {
position: absolute;
inset: 0;
-webkit-mask:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%,
linear-gradient(#fff,#fff);
-webkit-mask-composite:destination-out;
mask:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><polygon points="20,20 20,180 180,100 " fill="black"/></svg>') 0/100% 100%,
linear-gradient(#fff,#fff);
mask-composite:exclude;
background:blue;
}
<div id="box">
<div id="innerbox"></div>
</div>
This ranks high on Google and the answer didn't solve my problem b/c I cannot touch my background image so here is another way of doing this:
Create a frame with the clip-path.
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
place-items: center;
}
#clip,
#background {
width: 400px;
height: 400px;
}
#clip {
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
position: absolute;
background: #fff;
opacity: 0.8;
}
#background {
background: url(https://picsum.photos/400/400/) center/cover;
z-index: -1;
}
<div id="background">
<div id="clip"></div>
</div>
I put the clip-div inside the image because of convenience but you can also have it outside. However, make sure that you are okay with the limited browser support of clip-path.
To expand upon #leonheess great work with the aid of var() and calc(), you can setup variables for x/y/width/height and easily move around your square based on js familiar properties.
#clip-container {
--windowposition-x: 50px;
--windowposition-y: 50px;
--windowposition-height: 100px;
--windowposition-width: 100px;
}
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
place-items: center;
background: url(https://picsum.photos/400/400/) center/cover;
}
#clip-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(197, 185, 185, 0.7);
clip-path: polygon(0% 0%,
0% 100%,
var(--windowposition-x) 100%,
var(--windowposition-x) var(--windowposition-y),
calc(var(--windowposition-x) + var(--windowposition-width)) var(--windowposition-y),
calc(var(--windowposition-x) + var(--windowposition-width)) calc(var(--windowposition-y) + var(--windowposition-height)),
var(--windowposition-x) calc(var(--windowposition-y) + var(--windowposition-height)),
var(--windowposition-x) 100%,
100% 100%,
100% 0%);
}
<div id="clip-container"></div>
If you really wanted you could even take this a step further and define your css vars in your html like:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
place-items: center;
background: url(https://picsum.photos/400/400/) center/cover;
}
#clip-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(197, 185, 185, 0.7);
clip-path: polygon(0% 0%,
0% 100%,
var(--windowposition-x) 100%,
var(--windowposition-x) var(--windowposition-y),
calc(var(--windowposition-x) + var(--windowposition-width)) var(--windowposition-y),
calc(var(--windowposition-x) + var(--windowposition-width)) calc(var(--windowposition-y) + var(--windowposition-height)),
var(--windowposition-x) calc(var(--windowposition-y) + var(--windowposition-height)),
var(--windowposition-x) 100%,
100% 100%,
100% 0%);
}
<div id="clip-container" style="--windowposition-x: 75px;--windowposition-y: 75px;--windowposition-height: 75px;--windowposition-width: 75px;"></div>
I have a circle animation with a centered text inside.
Everything is wrapped into a div.
I'm trying to put this wrapper div on the bottom right of the page.
Any tips about how to archive this without let centered text going outside the circle?
here the code example https://codepen.io/D_s/pen/oNzQdJy
thank you!
html,
body {
height: 100%;
background: lightgrey;
}
.wrapper {
max-width: 50px;
max-height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.centered {
position: absolute;
color: white;
font: 3vw/3vw times;
height: 50px;
text-align: center;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
position: absolute;
top: calc(50% - 15vw);
left: calc(50% - 15vw);
overflow: hidden;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%" >SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
update the code like below:
.wrapper {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font: 3vw/3vw times;
margin: 0;
}
body {
background:grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"></path>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%">SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
This question already has answers here:
How can I create an inset curved background that works with a background gradient and overlapping transparent shapes?
(2 answers)
Closed 2 years ago.
I want to add a section which should be curved inwards on top and bottom, having an image in the background. I tried using svg and path but could not get the desired result.
I have inserted below a link of an image which is the result that I want.
section {
padding: 60px 0;
position: relative;
}
<section id="statistics" data-dir="up" style="background-image: url(https://hero.jpg); background-size: cover; background-position: center; background-attachment: fixed;" class="statistics-section text-white parallax">
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>
Here's one way to do it.
:root, html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
* {
box-sizing: border-box;
}
#header {
height: 20%;
width: 100%;
}
#main {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 80%;
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.5)), center / cover no-repeat url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSGvXdNxVmnn-fpjDeYYX-BqwD4mzPn6D79pw&usqp=CAU");
}
#top {
width: 100%;
height: 35%;
background: white;
clip-path: ellipse(65% 80% at center -40%);
}
#center {
width: 100%;
flex: 1;
color: white;
font-size: 1.5em;
text-align: center;
font-family: 'Helvetica Neue', sans-serif;
}
#bottom {
width: 100%;
height: 35%;
background: white;
clip-path: ellipse(65% 80% at center 140%);
}
<div id="header"></div>
<div id="main">
<div id="top"></div>
<div id="center">
Some Interesting Facts About Us
</div>
<div id="bottom"></div>
</div>
<div id="footer"></div>
You can use the same path and rotate it by 180 degrees, then absolutely position it on the bottom of the section. To make sure the elements heights fits I had to add an explicit heights on the section element.
section {
margin: 60px 0;
height: 400px;
position: relative;
}
#statistics {
background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
background-size: cover;
background-attachment: fixed;
background-position: center;
}
#bigHalfCircleCandyBottom {
transform: rotate(180deg);
position: absolute;
bottom: 0;
left: 0;
}
<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
<path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>
A more complete example along with a container for the text in the middle can be found in this Fiddle.
I want to create a curve as shown in below image using css.
I was trying something like this:
.curve {
background-color: #8aa7ca;
height: 65px;
width: 160px;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
<div class="curve">
<p>This is a sample text.</p>
</div>
Please help me
SVG
As Harry suggested in the comments, SVG would be your best option as a double curve in CSS isn't feasible without using multiple elements, pseudo elements or using possibly unsupported CSS3 properties.
SVG stands for Scalable Vector Graphic. The web browser views it as an image but you can add text and normal HTML elements within an SVG.
It is well supported across all browsers as viewable here: CanIUse
<svg width="466" height="603" viewbox="0 0 100 100" preserveAspectRatio="none">
<path d="M0,0
L100,0
C25,50 50,75 0,100z" fill="#8aa7ca" />
</svg>
SVG on MDN
CSS
Ofcourse this is still possible with CSS but does take using pseudo elements :before and :after. It is also not best for the curves as it will render them without anti-aliasing
div {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
div:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
div:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
<div></div>
SVG
In svg this can be created using a single path
<svg height="300px" viewBox="0 0 100 100">
<path fill="CornFlowerBlue" d="M0,0
100,0
C50,20 50,80 0,100 Z" />
</svg>
You could make this using pure CSS if you so wished.
Demo
This uses a large box shadow to create the second curve:
.wrap {
position: relative;
height: 400px;
width: 100%;
margin: 0 auto;
max-width: 1024px;
}
.shape {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
z-index: 10;
}
.shape:after {
content: "";
position: absolute;
top: 10%;
left: 0;
width: 100%;
height: 90%;
border-radius: 0 50% 0 0;
box-shadow: 0 0 0 999px lightgray;
}
.shape2 {
position: absolute;
top: 0;
left: 50%;
height: 100%;
width: 50%;
background: lightgray;
border-radius: 0 0 0 50%;
z-index: 10;
}
/******************************/
html,
body {
margin: 0;
padding: 0;
height: 100%;
vertical-align: top;
overflow: hidden;
background: cornflowerblue;
}
<div class="wrap">
<div class="shape"></div>
<div class="shape2">This will be where you can place the text to go down the right hand side of the slider</div>
</div>
I had a similar requirement but found the CSS for this task to be far too complex for my knowledge level. So, instead, I used an online wave generator.
With that, you can draw the wave you need and generate the SVG.
Then all you have to do is just copy-paste code for the generated wave.
This is the one I used:
svg wage generator
I'm trying to create a ring shape in css, divided into 4 quarters.
Each quarter will represent a button.
I've been playing around with the following code:
#quarterCircleTopLeft{
width:100px;
height:100px;
border:1px solid #000;
background: orange;
border-radius: 90px 0 70px 0;
-moz-border-radius: 90px 0 70px 0;
-webkit-border-radius: 90px 0 70px 0;
}
Which produces this (disregard the grey lines):
Obviously, I want the border at the right bottom to be inverted. However, since this is a button I cannot use another shape to produce a cutout (as this would overlap with other buttons of the menu). I've added a red line to show approx how I would want the border to go. Sorry, my paint skills are bad :-P
How can I invert the border or in another way produce the shape I want?
I'd do something like:
http://dabblet.com/gist/5476973
In short, lots of border radius + a white circle on top of everything.
On my example, I'd then bind click events onto the divs using javascript, or just make them all <a> elements instead and add a display:block;.
/**
* Quarter Circles
*/
.main {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
}
.quarter {
position: absolute;
width: 50%;
height: 50%;
transition: background-color 0.2s ease-in-out;
}
.quarter:hover {
background-color: pink;
}
.quarter1 {
top: 0;
left: 0;
background-color: red;
border-radius: 100% 0 0 0;
}
.quarter2 {
top: 0;
right: 0;
background-color: blue;
border-radius: 0 100% 0 0;
}
.quarter3 {
bottom: 0;
left: 0;
background-color: orange;
border-radius: 0 0 0 100%;
}
.quarter4 {
bottom: 0;
right: 0;
background-color: green;
border-radius: 0 0 100% 0;
}
.cutout {
width: 50%;
height: 50%;
background-color: white;
position: absolute;
top: 25%;
left: 25%;
border-radius: 50%;
pointer-events: none;
}
<div class="main">
<div class="quarter quarter1"></div>
<div class="quarter quarter2"></div>
<div class="quarter quarter3"></div>
<div class="quarter quarter4"></div>
<div class="cutout"></div>
</div>
Here is an <svg> solution.
Svg has its own <a> element svg.
Just press the corners and you will find some amazing documentation ;)
Jokes aside The a link works on the shape so the shape gets the link.
This leaves the space empty space inside the shape that will show any thing behind it.
<svg width="150px" height="150px" viewbox="-1 -1 102 102">
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="tomato" fill="orange" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="darkRed" fill="red" transform="translate(100, 0) rotate(90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="DarkBlue" fill="blue" transform="translate(100, 100) rotate(180)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
<a xlink:href="https://developer.mozilla.org/en-US/docs/SVG">
<path stroke="darkGreen" href="#" fill="green" transform="translate(0, 100) rotate(-90)" d="M10 50 0 50 C 0 16 16 0 50 0 V0 20
C 31 20 20 31 20 50Z" />
</a>
</svg>
i have been able to enhance the 1st answer and avoid getting the ring respond when mouse is on cutoff area.
http://codepen.io/a-zaki/pen/rLRyAm
/**
* Quarter Circles
*/
.main {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
}
.quarter {
position: absolute;
width: 50%;
height: 50%;
transition: background-color 0.2s ease-in-out;
z-index: 1;
}
.quarter:hover {
background-color: pink;
}
.quarter1 {
top: 0;
left: 0;
background-color: red;
border-radius: 100% 0 0 0;
}
.quarter2 {
top: 0;
right: 0;
background-color: blue;
border-radius: 0 100% 0 0;
}
.quarter3 {
bottom: 0;
left: 0;
background-color: orange;
border-radius: 0 0 0 100%;
}
.quarter4 {
bottom: 0;
right: 0;
background-color: green;
border-radius: 0 0 100% 0;
}
.cutout {
width: 50%;
height: 50%;
background-color: white;
position: absolute;
top: 25%;
left: 25%;
border-radius: 50%;
border: 3px solid #000;
z-index: 2;
}
<div class="main">
<div class="quarter quarter1"></div>
<div class="quarter quarter2"></div>
<div class="quarter quarter3"></div>
<div class="quarter quarter4"></div>
<div class="cutout"></div>
</div>
On Safari this should work:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40px;
height: 40px;
border: solid;
border-radius: 100px 0 0 0;
border-width: 30px 30px 0;
border-right: hidden;
}
</style>
<title>Quatre Circle Outline</title>
</head>
<body>
<div></div>
</body>
</html>