I have 2 images of CSS Div Shape. I want to make my DIVs like in the image.
Any help would be great.
.imageOne {
clip-path: polygon(0 0, 100% 0%, 100% 11%, 0 0);
height: 100px;
background: blue;
}
.imageTwo {
clip-path: polygon(80% 30%, 100% 41%, 100% 41%, 0 40%, 0 40%);
height: 100px;
background: blue;
}
<div class="imageOne">
</div>
<div class="imageTwo">
</div>
You can adjust the like below:
.imageOne {
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 40%); /* adjust the 40% here */
height: 100px;
background:
linear-gradient(to bottom left,transparent 49%,#b3e1ff 50%)
bottom left/200% 60% /* adjust the 200% here, 60% = 100% - 40% (from the top) */
no-repeat
#e1f4ff;
}
.imageTwo {
/* here ----v v---- and here the same */
clip-path: polygon(100% 100%,100% 70%, 80% 0, 0 70%,0 100%);
/* adjust this to control the top ----^ */
height: 100px;
background: #e1f4ff;
}
<div class="imageOne">
</div>
<div class="imageTwo">
</div>
Related
I am working on angular application in which I am making a progress bar. My code is as follows:
CSS:
.progressbar {
height: 56px;
background: lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
animation: change 1s linear infinite;
margin: 5px -10px;
clip-path: polygon(95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%, 0% 0%);
}
.progressbar:first-child {
margin-left: 0;
clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%);
}
.progressbar:last-child {
margin-right:0;
}
.bar {
display:flex;
gap:20px; /*You can use now this property to play with the separation between the bars*/
}
.progressbar.active{
background:
linear-gradient(to right, red 0%, yellow 50%, green 34%)
left/var(--p, 100%) fixed,
lightgray;
box-shadow: inset 0px -2px 5px rgba(0, 0, 0, 0.5);
}
HTML:
<div class="bar">
<div class="progressbar active" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>
<div class="progressbar" style="width:100%;"></div>
</div>
With this I am getting a progress bar like this . This is very near to my desired result. But with this code arrow shape of bars is not proper. The shape of arrow I want is . How can I change shape of my bars exactly as same that of required as shown in image.
Add negative right margin to your tabs (+ the desired gap size)
Add a positive margin-right to the parent wrapper (of the same size)
Easily achievable with just two CSS variables --d and --gap. Edit their values to achieve the desired result:
/*Quick Reset*/
* { margin: 0; box-sizing: border-box; }
body {
font: 1rem/1.3 sans-serif;
}
/*
* Progressbar
*/
.bar {
--d: 1rem; /* arrow depth */
--gap: 0.3rem; /* arrow thickness, gap */
display: flex;
margin-right: var(--d);
}
.bar-step {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0.6rem var(--d);
margin-right: calc(var(--d) * -1 + var(--gap));
background: #d9e3f7;
color: #23468c;
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%,
var(--d) 50%
);
}
.bar-step:first-child {
clip-path: polygon(
0% 0%,
calc(100% - var(--d)) 0%,
100% 50%,
calc(100% - var(--d)) 100%,
0% 100%
);
}
.bar-step.active {
background: #23468c;
color: #fff;
}
<div class="bar">
<div class="bar-step active">Step 1</div>
<div class="bar-step">Step 2 text</div>
<div class="bar-step">Step 3</div>
<div class="bar-step">Step 4</div>
</div>
When I try to activate any effect on a picture in my master page it just messes the whole order of the page and just ruins it. How can I fix it?
I just want a cool effect on my website.
body {
padding: 0;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.glitch {
position: relative;
overflow: hidden;
}
.glitch img {
position: relative;
z-index: 1;
display: block;
}
.glitch__layers {
position: absolute;
z-index: 2;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.glitch__layer {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: url(https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80);
background-repeat: no-repeat;
background-position: 0 0;
}
.glitch__layer:nth-child(1) {
transform: translateX(-5%);
animation: glitch-anim-1 2s infinite linear alternate;
}
.glitch__layer:nth-child(2) {
transform: translateX(3%) translateY(3%);
animation: glitch-anim-2 2.3s -.8s infinite linear alternate;
}
.glitch__layer:nth-child(3) {
transform: translateX(5%);
animation: glitch-anim-flash 1s infinite linear;
}
#keyframes glitch-anim-1 {
0% {
clip-path: polygon(0 0%, 100% 0%, 100% 5%, 0 5%);
}
10% {
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
clip-path: polygon(0 35%, 100% 35%, 100% 35%, 0 35%);
}
50% {
clip-path: polygon(0 45%, 100% 45%, 100% 46%, 0 46%);
}
60% {
clip-path: polygon(0 50%, 100% 50%, 100% 70%, 0 70%);
}
70% {
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
}
}
#keyframes glitch-anim-2 {
0% {
clip-path: polygon(0 15%, 100% 15%, 100% 30%, 0 30%);
}
15% {
clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}
25% {
clip-path: polygon(0 8%, 100% 8%, 100% 20%, 0 20%);
}
30% {
clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}
45% {
clip-path: polygon(0 45%, 100% 45%, 100% 45%, 0 45%);
}
50% {
clip-path: polygon(0 50%, 100% 50%, 100% 57%, 0 57%);
}
65% {
clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}
75% {
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
80% {
clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
}
95% {
clip-path: polygon(0 45%, 100% 45%, 100% 60%, 0 60%);
}
100% {
clip-path: polygon(0 11%, 100% 11%, 100% 15%, 0 15%);
}
}
#keyframes glitch-anim-flash {
0% {
opacity: .2;
}
30%,
100% {
opacity: 0;
}
}
<div class="glitch">
<img src="https://images.unsplash.com/photo-1561019733-a84b4e023910?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80" alt="">
<div class="glitch__layers">
<div class="glitch__layer"></div>
<div class="glitch__layer"></div>
<div class="glitch__layer"></div>
</div>
</div>
I want to create a animated pie chart by only css and enlarge the sector while hovering,
I found an example code online which perfectly fit with my requirements.
But I found that in Windows 10, Chrome browser (Edge also, but firefox worked perfectly), there will be a ghost line appeared when the sector is animated, there is no problem on macos's chrome.
Any idea why this happened? and how to fix this problem?
Code:
HTML:
<div id="skills">
<div id="part1" class="circle animate"></div>
<div id="part2" class="circle animate"></div>
<div id="part3" class="circle animate"></div>
<div id="part4" class="circle animate"></div>
<div id="part5" class="circle animate"></div>
<div id="part6" class="circle animate"></div>
</div>
CSS:
#skills {
position: relative;
width: 300px;
height: 300px;
margin: 30px auto;
}
.circle {
width: 100%;
height: 100%;
border-radius: 50%;
position: absolute;
}
.animate {
-webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
-moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
-o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
transition: 0.2s cubic-bezier(.74,1.13,.83,1.2);
}
.animate:hover {
transform: scale(1.1);
transform-origin: center center;
}
#part1 {
background-color: #E64C65;
-webkit-clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0);
clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0);
}
#part2 {
background-color: #11A8AB;
-webkit-clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%);
clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%);
}
#part3 {
background-color: #4FC4F6;
-webkit-clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%);
clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%);
}
#part4 {
background-color: #FFED0D;
-webkit-clip-path: polygon(50% 50%, 0 100%, 36.6% 100%);
clip-path: polygon(50% 50%, 0 100%, 36.6% 100%);
}
#part5 {
background-color: #F46FDA;
-webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 100%);
clip-path: polygon(50% 50%, 0 36.6%, 0 100%);
}
#part6 {
background-color: #15BFCC;
-webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0);
clip-path: polygon(50% 50%, 0 36.6%, 0 0, 50% 0);
}
This is the online source I founded,
https://codepen.io/Garnel/pen/eNLaWj
Video:
https://www.youtube.com/watch?v=eztSWXiIHLY
The code is below.
gradient
there is a very small gap between two divs.but it should not have.
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
}
<div class='gra left'></div>
<div class='gra right'></div>
It's happening because of Antialiasing.
Use left:0; with the left class and left: -1px; with the right class to overlap Antialiasing
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
left:0;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
left: -1px;
}
<div class='gra left'></div>
<div class='gra right'></div>
You can change by:
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
.gra {
position: absolute;
width: 200px;
height: 200px;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%) ;
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
}
.right {
background: linear-gradient(270deg, red 0%, blue 101%);
clip-path: polygon(-1% 0%, 100% 0%, 100% 101%);
}
<div class='gra left'></div>
<div class='gra right'></div>
Or, another way:
.gra {
position: relative;
width: 200px;
height: 200px;
overflow:hidden;
}
.left {
background: linear-gradient(0deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
position:absolute;
bottom:0;
left:0;
width:201px;
height:201px;
}
.right {
background: linear-gradient(270deg, red 0%, blue 100%);
clip-path: polygon(0% 0%, 100% 0%, 100% 100%);
position:absolute;
top:0;
right:0;
width:201px;
height:201px;
}
<div class="gra">
<div class="left"></div>
<div class="right"></div>
</div>
Here is an idea without clip-path where you will have a better support, less of code and no gap issue
.container {
background: linear-gradient(to left, red 0%, blue 100%);
position: relative;
height: 200px;
width: 200px;
overflow: hidden;
}
.container:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, red 0%, blue 100%);
transform-origin: bottom right;
transform: skewX(45deg);
}
<div class="container">
</div>
You can fix this by adding a half pixel to the 100% values.
Change:
clip-path: polygon(0% 0%, 0% 100%, 100% 100%);
To:
clip-path: polygon(0% 0%, 0% calc(100% + 0.5px), 100% calc(100% + 0.5px));
If you need to fix a gap on the top, you could change 0% to calc(0% - 0.5px).
I am trying to make my div have this form:
I only get this result with the code I am using:
div {
background: lightblue;
height: 34rem;
-webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}
<div></div>
Thanks for you help guys!
If it's only about coloration you don't need to use clip-path. You can easily achieve this with multiple background and have a better support:
div.box {
height: 300px;
background:
linear-gradient(blue,blue) top/100% 70%,
linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,
linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;
background-repeat:no-repeat;
margin-bottom:20px;
}
<div class="box">
</div>
In case you need the black border you can adjust like below:
div.box {
height: 300px;
background:
linear-gradient(blue,blue) top/100% 70%,
linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,
linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left -20px/calc(50% + 21px) 30%;
background-repeat:no-repeat;
margin-bottom:20px;
}
<div class="box">
</div>
div {
background: lightblue;
height: 34rem;
-webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}
<div></div>
This link is helpful https://bennettfeely.com/clippy/