We Keep Coding

How to animate the fill of an arc in CSS? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Is there a way we can fill color of css semi-circle in an incremental way in anticlockwise direction like a progress bar.
Here is the semi-circle code. https://jsfiddle.net/sonymax46/wqfovdjh/7/.
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid blue;
transform: translateX(50%);
}
I want existing blue colour to be filled with Green on an event. How to achieve this with css O SVG
Thank in Advance

Option A is to use a container that cut's off a circular element and a pseudo-class as a "mask" over the top of the circle. Then a gradient background shows the other color when the element is rotated.
The major drawback to this is you have to have a solid color background that the overlay can match visually.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
/* just to show the box could be transparent */
background-color: lightgray;
cursor: pointer;
}
.arc {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
position: relative;
/* Use relative on parent so mask aligns */
left: 50%;
/* Move the circle 'outside' the wrapper */
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.arc:after {
/* this creates the 'mask' */
content: '';
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
background-color: white;
border-radius: 50%;
}
.wrapper:hover .arc {
/* rotate the full element because we can't transition backgrounds */
transform: rotate(-180deg);
}
.gradientExample {
/* just to show the gradient */
height: 20px;
width: 200px;
margin: 0 20px;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the arc</p>
<div class="wrapper">
<div class="arc"></div>
</div>
<div class="gradientExample"></div>
Option B - Use a clip-path instead of overlapping elements. This is much better but you need to create an SVG object to use for the arc and that's a pain from a sizing standpoint.
.wrapper {
margin: 20px;
width: 200px;
height: 200px;
overflow: hidden;
background-color: lightgray;
cursor: pointer;
}
.svgArc {
width: 100%;
height: 100%;
position: relative;
clip-path: url(#svgPath);
}
.svgArc:after {
/* have to use a pseudo element because we can't rotate the background */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(55, 238, 79, 1) 0%, rgba(55, 238, 79, 1) 50%, rgba(0, 212, 255, 1) 50%, rgba(0, 212, 255, 1) 100%);
transition: transform 1s ease;
}
.v2:hover .svgArc:after {
transform: rotate(180deg);
}
p {
font-family: Sans-Serif;
font-size: 14px;
margin: 20px 20px 0 20px;
}
<p>Hover over the gray square</p>
<div class="wrapper v2">
<div class="svgArc">
</div>
</div>
<svg width="0" height="0" viewBox="0 0 200 200">
<defs>
<clipPath id="svgPath">
<path fill="#000000" stroke="#ffffff" stroke-width="1" d="M100,0 L100,10 L100,10 C50.2943725,10 10,50.2943725 10,100 C10,149.705627 50.2943725,190 100,190 L100,200 L100,200 C44.771525,200 0,155.228475 0,100 C0,44.771525 44.771525,0 100,0 Z"></path>
</clipPath>
</defs>
</svg>
Option C - Create an SVG circle and animate the offset-path. See my answer and example here: How to make linear css transition to SVG path?

maybe with css custom variables ?
const Root = document.documentElement
, btColor = document.getElementById('bt-color')
;
btColor.onclick=_=>
{
Root.style.setProperty('--bColor', 'green')
}
:root {
--bColor : blue;
}
.cc{
background-color: transparent;
overflow: hidden;
width: 80px;
}
.curve {
height: 60px;
width: 100%;
background-color: none;
border-radius: 50%;
border: 2px solid var(--bColor);
transform: translateX(50%);
}
<div class="cc">
<div class="curve"></div>
</div>
<br>
<button id="bt-color">change color</button>

Is a see-through child div possible?

The image is the grandparent div, the black translucent overlay is the parent div, and the cropped section is the child div. User will see the grandparent image and the parent overlay, then he can crop through it using the child cropper div. I tried and failed with opacity and rgba background.
These crazy approaches do seem to work for me -
Set the grandparent image in the background of the child div as well and then change the x/y of the background-position.
Combine child and parent into one single div, and use rgba border as the overlay (my friend's suggestion).
Found this on stackoverflow, which uses box-shadow instead of borders and seems like a similar approach to #2.
My minor gripe with #2 and #3 is that I'll need to add another div for the dashed borders so the user clearly knows what he's cropping. But my bigger gripe with all of them is that none of these looks like the right approach.
Is there a proper / better / 2018-ish / "its so obvious, you idiot" way to do this?
Update: Here's the basic markup (I am okay with a different markup too if that helps in solving this)
#grandparentImage {
background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
background-size: cover;
position: relative;
height: 500px;
}
#parentOverlay {
background: rgba(0,0,0,0.5);
height: 100%;
position: relative;
}
#childCropper {
border: 1px dashed #ccc;
left: 50px;
height: 100px;
width: 100px;
position: absolute;
top: 50px;
}
<div id="grandparentImage">
<div id="parentOverlay">
<div id="childCropper"></div>
</div>
</div>
Edit: It is not a duplicate of the marked question, since that question deals with how to grab the cropped image, this one deals with how to show the user what he's cropping. More about UI than data.

You can set box-shadow with 100vmax spread radius on the #childCropper. In this way it will always cover the screen:
#grandparentImage {
background: url(https://9to5mac.com/wp-content/uploads/sites/6/2018/07/Desert-2.jpg) no-repeat;
background-size: cover;
position: relative;
height: 500px;
}
#childCropper {
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
border: 1px dashed #ccc;
box-shadow: 0 0 0 100vmax rgba(0,0,0,0.5);
}
body {
margin: 0;
}
<div id="grandparentImage">
<div id="childCropper"></div>
</div>

This seems like a perfect job for pseudo-elements. So this solution is an upgrade of #2 suggestion in the question, but instead of using the element itself, it uses :after:
#grandparentImage {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg/800px-%D0%94%D0%B7%D0%B5%D0%BC%D0%B1%D1%80%D0%BE%D0%BD%D1%8F._%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D0%BB%D1%83%D1%87%D0%B8_%D1%81%D0%BE%D0%BB%D0%BD%D1%86%D0%B0.jpg) no-repeat;
background-size: cover;
position: relative;
height: 500px;
overflow: hidden;
z-index: 1;
}
#childCropper {
border: 2px dashed #ccc;
position: absolute;
top: 50px;
left: 50px;
height: 200px;
width: 200px;
}
#childCropper:after {
content: "";
width: 100%;
height: 100%;
border: 1000px solid rgba(0, 0, 0, 0.5);
position: absolute;
top: -1000px;
left: -1000px;
z-index: -1;
}
<div id="grandparentImage">
<div id="childCropper"></div>
</div>
Note: There will be no need for the #parentOverlay element anymore. Also this solution requires the grand-parent element to have an overflow: hidden property and a z-index (why?).

I'm guessing this is what you're looking for:
overlay-mask {
background-color: rgba(0,0,0,.65);
clip-path: polygon(0% 0%, 75% 0%, 75% 25%, 25% 25%, 25% 75%, 75% 75%, 75% 0%, 100% 0%, 100% 100%, 0 100%);
z-index: 1;
pointer-events: none;
/* rest is optional, you could use
* `position:absolute` to place it in a parent with `relative`
*/
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
}
body {
margin: 0;
background: url("https://loremflickr.com/800/600") no-repeat center center /cover;
min-height: 100vh;
}
<overlay-mask></overlay-mask>
It's a simple shape following the polygon of the dark area. Points position can be expressed in percentage, using calc() or even providing a custom <svg> by id (and use an external tool, like Adobe Illustrator to generate it.
Current browser coverage: 87.99%.
You can have any content under the mask. And, instead of using position:fixed, you could use position:absolute and place it in the desired container with position:relative, to apply to that container.
Another method is to use <svg>s <path>. Animating them is pretty straight forward using either smil animations or plain CSS keyframes.
Example:
#overlay-mask {
z-index: 1;
pointer-events: none;
/* rest is optional, you could use
* `position:absolute` to place it in a parent with `relative`
*/
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
color: rgba(0,0,0,.65);
width: calc(100% + 4px);
height: calc(100% + 4px);
left: -2px;
top: -2px;
}
body {
margin: 0;
background: url("https://loremflickr.com/800/600") no-repeat center center /cover;
min-height: 200vh;
}
h2 {color: white;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="overlay-mask" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="none"
viewBox="0 0 600 600" width="600" height="600">
<defs>
<path d="M0 600L0 0L600 0L600 600L0 600ZM100 200L200 200L200 100L100 100L100 200Z" id="cutPath">
<animate attributeType="XML" attributeName="d"
values="M0 600L0 0L600 0L600 600L0 600ZM100 200L200 200L200 100L100 100L100 200Z; M0 600L0 0L600 0L600 600L0 600ZM200 300L300 300L300 200L200 200L200 200Z;M0 600L0 0L600 0L600 600L0 600ZM100 300L300 300L300 100L100 100L100 200Z;M0 600L0 0L600 0L600 600L0 600ZM100 200L200 200L200 100L100 100L100 100Z"
keyTimes="0; 0.33; 0.66; 1"
dur="3s" repeatCount="indefinite"
/>
</path>
</defs>
<use xlink:href="#cutPath" opacity="1" fill="currentColor" fill-opacity="1"></use>
<use xlink:href="#cutPath" opacity="1" fill="none" stroke="white" stroke-width="2"
stroke-dasharray="1,1"
></use>
</svg>
<h2>Scroll down...</h2>

Overlaying divs (Proof of Concept)
.parent,
.child {
background-image: url(https://scontent-lht6-1.cdninstagram.com/vp/0f18c710d8dc3ebd48819b3f9f44b5cc/5C28EE7E/t51.2885-15/e35/29094825_1798384780455300_8914767740305145856_n.jpg?se=7&ig_cache_key=MTc0MDQ5MzIwMjE5OTYyODM5MQ%3D%3D.2);
background-size: contain;
}
.parent {
height: 1072px;
width: 1072px;
opacity: 0.3
}
.child {
position: absolute;
top: 150px;
left: 20px;
height: 200px;
width:500px;
background-position: -20px -150px;
background-size: 1072px 1072px
}
<div class="parent"></div>
<div class="child"></div>

Here is another approach that uses only one element where you can rely on gradient and multiple background to create the cropped overlay and also the dotted border:
#grandparentImage {
--g:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
--t:repeating-linear-gradient(to right ,#ccc 0,#ccc 2px,transparent 2px, transparent 4px);
--b:repeating-linear-gradient(to bottom,#ccc 0,#ccc 2px,transparent 2px, transparent 4px);
background-image:
/*the border*/
var(--t),var(--t),var(--b),var(--b),
/*the overlay*/
var(--g),var(--g),var(--g),var(--g),
/*the image*/
url(https://picsum.photos/1000/800?image=1069);
background-size:
/*the border*/
40% 2px,40% 2px,2px 40%,2px 40%,
/*the overlay*/
100% 30%,100% 30%,20% 40%, 40% 40%,
/*the image*/
cover;
background-position:
/*the border*/
33.33% 30%,left 33.33% bottom 30%,20% 50%,60% 50%,
/*the overlay*/
top,bottom,left center,right center,
/*the image*/
center;
background-repeat:no-repeat;
position: relative;
height: 100vh;
}
body {
margin:0;
}
<div id="grandparentImage">
</div>
The overlay will be formed by 4 gradients as a rectangular shapes and each border will be a repeating gradient to alternate white/transparent.
The hard part is to understand the different values and how the caclulation of background-size/background-position is done. Here is a good reading for this: background-position not working in percentage for linear-gradient
We can also and the dots of your screenshot:
#grandparentImage {
--g:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
--t:repeating-linear-gradient(to right ,#ccc 0,#ccc 2px,transparent 2px, transparent 4px);
--b:repeating-linear-gradient(to bottom,#ccc 0,#ccc 2px,transparent 2px, transparent 4px);
--d:radial-gradient(#ccc 60%,transparent 62%);
background-image:
/*the dots*/
var(--d),var(--d),var(--d),var(--d),var(--d),var(--d),var(--d),var(--d),
/*the border*/
var(--t),var(--t),var(--b),var(--b),
/*the overlay*/
var(--g),var(--g),var(--g),var(--g),
/*the image*/
url(https://picsum.photos/1000/800?image=1069);
background-size:
/*the dots*/
10px 10px,10px 10px,10px 10px,10px 10px,10px 10px,10px 10px,10px 10px,10px 10px,
/*the border*/
40% 2px,40% 2px,2px 40%,2px 40%,
/*the overlay*/
100% 30%,100% 30%,20% 40%, 40% 40%,
/*the image*/
cover;
background-position:
/*the dots*/
20% 30%,20% 70%,20% 50%,60% 30%,60% 50%,60% 70%,40% 30%,40% 70%,
/*the border*/
33.33% 30%,left 33.33% bottom 30%,20% 50%,60% 50%,
/*the overlay*/
top,bottom,left center,right center,
/*the image*/
center;
background-repeat:no-repeat;
position: relative;
height: 100vh;
}
body {
margin:0;
}
<div id="grandparentImage">
</div>

Diagonal Side div color css js

i have 2 div like this
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>
CSS :
.container {
width:100%;
}
.one , .two {
width:50%;
display:inline-block;
}
I want to give this 2 divs a diagonal side color to be like this
I tried rotate but it gave me some white spot.
Can any one help me please ?

A single gradient on the parent will do the visual:
html {
min-height:100%;
background:linear-gradient(140deg, rgb(153, 180, 211)50%, rgb(217, 181, 150) 50%)
}
example on HTML background sized at 100% viewport's height at the minimum.

You can use clip paths and 2 div within a container,
https://codepen.io/anon/pen/OOXPmv
HTML
<div id="wrapper">
<div id="left"></div>
<div id="right"></div>
</div>
CSS
body, html {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
background: #ccc;
}
#wrapper {
width: 100%;
height: 100%;
background: #111;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 101%; /* If you make it 100%, you get a bit of black showing along the diagonal */
height: 100%;
background: #99b4d3;
-webkit-clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
clip-path: polygon(0 0, 76% 0, 24% 100%, 0% 100%);
}
#right {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: #d9b596;
-webkit-clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
clip-path: polygon(76% 0, 100% 0, 100% 100%, 24% 100%);
}

Try using an svg path css background property. See example below.
.container {
background: red;
height: 117px;
}
.one {
float: left;
width: 50%;
height: 117px;
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100' fill='blue' preserveAspectRatio='none'><path d='M0 0 L0 100 L50 100 L100 0 Z' /></svg>") no-repeat;
}
.two {
float: left;
width: 50%;
height: 117px;
}
<div class="container">
<div class="one"></div>
<div class="two"></div>
</div>

I would like to have a triangle in my web and filled it with images

I'm designing a little web page, just for practicing(I'm a begginer), and as the title says, I need to create a triangle with a background image.
I have this model that I created :
My website
I'm talking about the triangles on the up-right corner of the "posts"
The only way I know of creating a triagle is with borders in CSS, but that won't help because of the image I need to use.
Maybe you have other idea
Thanks !

Tell me if you need help getting this in to your own code, here's the example:
div {
position: absolute;
width: 128px;
height: 128px;
background-image: url(http://i.imgur.com/envk4PP.png);
background-repeat: no-repeat;
background-size: cover;
-webkit-clip-path: polygon(0 12%, 0 86%, 35% 50%);
clip-path: polygon(0 0%, 100% 100%, 100% 0%);
}
<div></div>

I have to do something similar for a website, this is my example. I hope you can use it.
.overheader{
padding: 40px 0;
-webkit-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
-moz-clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
clip-path: polygon(0 0, 0% 0, 20.3% 100%, 0% 100%);
background-image: url('http://www.todofermentacion.cl/assets/img/cerveza.png');
}
.page-header {
padding: 50px;
}
<div class="page-header">
<div class="overheader">
</div>
</div>
You have to modify the parameters of polygon to make the triangle anyway you want

Another option:
.post {
/* not important */
margin: 100px;
width: 10rem;
height: 5rem;
border: solid 1px black;
background: ivory;
padding: 1rem;
/* important */
position: relative;
overflow: hidden;
}
.post:after {
position: absolute;
display: block;
content: " ";
background-image: url(https://www.gravatar.com/avatar/614f3577183f1a9219884f73ec2538fd);
transform: rotate(45deg);
width: 50px;
height: 50px;
/* move it half the width*/
top: -25px;
right: -25px;
}
<div class="post">
Here is my post
</div>

:root{
--imageblockwidth: 105px;
--imageblockheight: 80px;
/*css variables*/
}
.imagediv {
width: var(--imageblockwidth);
height: var(--imageblockheight);
background-image: url(https://i.ytimg.com/vi/2fb-g_V-UT4/hqdefault.jpg);
background-size: contain;
background-repeat: no-repeat;
}
.imageoverlapper {
width: var(--imageblockwidth);
height: var(--imageblockheight);
box-sizing: border-box;
/*triangles using borders*/
border-top: var(--imageblockheight) solid rgba(0,0,0,0);
border-left: var(--imageblockwidth) solid yellow;
position: relative;
top : calc(-1*var(--imageblockheight));
}
<div class="imagediv"></div>
<div class="imageoverlapper"></div>
Just overlap rectangle with background image by triangle

Slanted div using css and transparency

I've seen several questions about this and all of them seem to use solid backgrounds to create the slant, if this is a duplicate of another question I apologize, I have tried to search for this endlessly.
Problem: I want to know how to slant either one side of a div or both to achieve the end result below while making it cross browser compatible and responsive.
I have attached the two images below to help with the demonstration.
Note: If someone has text within the div I do not want it to get skewed. If not possible with css alone please provide a js version.
Two Images:
End Result:

This is possible in css using clip-path and position: absolute.
(Unfortunately, this will not work on Firefox or IE)
div {
position: absolute;
top: 0;
height: 400px;
width: 500px;
}
.img1 {
background-image: url(http://i.stack.imgur.com/E9Sl2.jpg);
-webkit-clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
}
.img2 {
background-image: url(http://i.stack.imgur.com/Nl3Fw.jpg);
-webkit-clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
}
<div class="img1"></div>
<div class="img2"></div>

One way to get this result in all the modern browsers is thru the use of an additional div, to contain at least on of the images.
This div will be rotated, overflow hidden, and then the background inside it rotated again in the opposite direction
.base {
width: 400px;
height: 300px;
position: relative;
overflow: hidden;
background-image: url(http://placekitten.com/1000/750);
background-size: cover;
}
.image2 {
position: absolute;
width: 120%;
height: 70%;
bottom: 50%;
left: -10%;
transform: rotate(15deg);
overflow: hidden;
}
.image2:after {
content: "";
position: absolute;
width: 100%;
height: 140%;
top: 20%;
left: 10%;
transform: rotate(-15deg);
background-image: url(http://placekitten.com/1200/900);
background-size: cover;
}
<div class="base">
<div class="image2"></div>
</div>

Using SVG you get better browser support than clip-path + some other cool stuff.
.clip-block {
text-align: center;
}
.clip-wrap {
display: inline-block;
vertical-align: top;
padding: 0;
margin: 0 20px;
}
.clip-svg {
width: 0;
height: 0;
}
.clip-svg-1 {
width: 200px;
height= 200px;
-webkit-clip-path: url("#clip-polygon");
clip-path: url("#clip-polygon");
}
.clip-svg-2 {
width: 200px;
height= 200px;
-webkit-clip-path: url("#clip-polygon2");
clip-path: url("#clip-polygon2");
margin-top: -104px;
}
<div class="clip-block">
<div class="clip-wrap">
<img src="http://lorempixel.com/200/200/animals/4" alt="" class="clip-svg-1">
</div>
</div>
<div class="clip-block">
<div class="clip-wrap">
<img src="http://lorempixel.com/200/200/animals/6" alt="" class="clip-svg-2">
</div>
</div>
<svg class="clip-svg">
<defs>
<clipPath id="clip-polygon" clipPathUnits="objectBoundingBox" >
<polygon points="0 0.5, 0 0, 1 0, 1 1" />
</clipPath>
</defs>
</svg>
<svg class="clip-svg">
<defs>
<clipPath id="clip-polygon2" clipPathUnits="objectBoundingBox" >
<polygon points="0 1, 0 0, 1 0.5, 1 1" />
</clipPath>
</defs>
</svg>