I am working on angular app and I have a progress bar and code is as follows :
.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>
How I can make right border of last child same as left border of first child?
Adapting last element's clip path as below:
.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:last-child {
clip-path: polygon( 0% 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 0%, calc(100% - var(--d)) 100%, 0% 100%, var(--d) 50%)
}
.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>
EDIT: apologies I left in a typo so it mucked it up, here's the new clip-path for the last child
.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:last-child {
clip-path: polygon(100% 0, 100% 50%, 100% 100%, 0% 100%, var(--d) 50%, 0% 0%);
}
.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>
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>
I have been trying to make a custom shape with a border and transparent background.
The initial approach, i tried was with transfrom skew but that couldn't give me the shape i was after.
I have also been experimenting with clip paths, my first attempt i managed to control the angle based off the height and also the right padding, which is a benefit. I would prefer to use this for that reason but unfortunately putting border on it doesn't work.
I found a bit online about having a shape inside a shape but then i cant have a clear background but its the shape i'm after.
If any one knows how i can create this shape either amending the code i tried using or a different approach i haven't thought about that would be great.
For visual reference this is what i'm trying to achieve.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--cta-height: 60px;
--cta-angle: calc(var(--cta-height) - 20px);
--cta-side-padding: 40px;
--cta-height-inner: calc(var(--cta-height) - 4px);
--cta-angle-inner: calc(var(--cta-height-inner) - 20px);
}
.img1 {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
}
.bk-image {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding: 50px;
}
/* attemp one with angle and right padding based off of the height */
.cta {
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
display: flex;
align-items: center;
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding);
margin-bottom: 50px;
}
.cta__ora {
border: 2px solid orange;
color: #ffffff;
}
.flex-p {
display: flex;
align-content: center;
}
/* attemp two */
.outside {
position: relative;
background: tomato;
clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
height: var(--cta-height);
padding-right: calc(var(--cta-angle) + var(--cta-side-padding));
padding-left: var(--cta-side-padding)
}
.inside {
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
background: white;
clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
-webkit-clip-path: polygon(0% 0%, calc(100% - 4px) 0%, calc(100% - var(--cta-angle)) 100%, 0% 100%);
}
</style>
</head>
<body>
<div class="bk-image img1 ">
<div class="flex-p">
<a class="cta cta__ora">clip path angle adjust from the height</a>
</div>
<div class="outside">
<div class="inside">
hello
</div>
</div>
</div>
</body>
</html>
You can work a little bit with ::after and position like a slash
body {
background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg") no-repeat;
}
.inside {
height: 50px;
width: 300px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
position: relative;
clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}
.inside::after {
content: "";
position: absolute;
height: 65px;
width: 300px;
top: -2px;
right: -1.5px;
border-right: 2px solid black;
transform: rotate(31.8deg);
transform-origin: right top;
}
<div class="inside">
Find out more
</div>
I have created a polygon triangle and I want to stack them next to each other
I have used shape-outside however it does not seem to be working.
I want this to be dynamic so more can be added without the need to change the code
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}
div:nth-child(even) {
width: 280px;
height: 280px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
left: -137px;
}
div {
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Simply adding margin-right: -274px; to div:nth-child(even) does the trick.
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
}
div:nth-child(even) {
width: 280px;
height: 280px;
margin-right: -274px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
float: left;
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
left: -137px;
}
div {
position: relative;
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
You could use the pseudo selector of
:nth-child(even)
in order to select all 'even' elements.
I haven't used the clip-path (due to browser compatibility issues), so this wouldn't be the cleanest, but this (should) work on more browsers:
.parent {
height: 100px;
width: 100px;
margin: 2px;
display: inline-block;
position: relative;
overflow: hidden;
margin-left: -50px;
}
.parent:nth-child(odd) {
top: -50px;
}
.parent:first-child {
margin-left: 0;
}
.parent:nth-child(odd) .child {
position: absolute;
bottom: 0;
left: 0;
background: tomato;
height: 70%;
width: 70%;
transform: rotate(45deg);
transform-origin: bottom left;
}
.parent:nth-child(even) .child {
position: absolute;
top: 0;
left: 0;
background: tomato;
height: 70%;
width: 70%;
transform: rotate(-45deg);
transform-origin: top left;
}
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
<div class="parent">
<div class="child"></div>
</div>
I have fixed your css quickly (so pardon mistakes) , now they are aligning next to each other and you can add how many you want and they will alignt as long as there is space.
div:nth-child(odd) {
width: 280px;
height: 280px;
background: #1e90ff;
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
/* float: left; */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
shape-outside: polygon(50% 0%, 0% 100%, 100% 100%);
margin-left: -141px;
}
and
div:nth-child(even) {
width: 280px;
height: 280px;
background: #1e90ff;
display: inline-block;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg) center center;
background-size: cover;
/* float: left; */
-webkit-clip-path: polygon(50% 100%, 0 0, 100% 0);
clip-path: polygon(50% 100%, 0 0, 100% 0);
shape-outside: polygon(50% 100%, 0 0, 100% 0);
/* left: -137px; */
margin-left: -141px;
}
and
body:nth-child(1){
margin-left:0; /* To clear the first marign */
}
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>
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).