Good morning,
I need assistance with the below attached image:
Cut corner
Using linear gradient how do I move the top cut corner to the bottom corner and make the top corner square/sharp like the other corners. Please see current css below:
body.page {
background: url(../img/Login-bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
font-size: 14px;
align-items: center;
padding-top: 50px;
padding-bottom: 50px;
}
.cut-corner {
position: relative;
color: #4a4a4c;
background-repeat: no-repeat;
background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
background-size: 1.5px 100%, 1.5px 100%, 100% 1.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
margin: 25px;
}
.cut-corner:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: -1;
opacity: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
linear-gradient(to bottom left, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
background-size: 0.5px 100%, 1.5px 100%, 100% 0.5px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% 65px, -65px 0%, 0px 100%, 100% 0%, -65px 0%, 100% 65px;
}
HTML:
<body class="page cut-corner">
...
</body>
Any assistance would be greatly appreciated.
You manage the cut in the background-position part like this
background-position: 0% 0%, 100% -65px, 0px 0%, -65px 100%, 100% 100%, -65px 50%, 100% 65px;
As you can see between each coma, there are two values defined of which the first one determines the position of each border (top border, bottom border...) and the other value defines the length of the border, try playing with the values and you will be able to make the top border full length, the bottom border a bit shorter, move the right border a bit higher and move the diagonal line to the bottom, then just change this from bottom left to bottom right as a way to change the angle of the small diagonal line like this
background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
If you don't care about understanding it and just want to apply the code, here you go the entire code already modified (the only changes made are in cut-corner:after)
.cut-corner:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: -1;
opacity: 100%;
background-repeat: no-repeat;
background-image: linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431), linear-gradient(#bcd431, #bcd431),
linear-gradient(to bottom right, transparent calc(50% - 0.5px), #bcd431 calc(50% - 0.5px), #bcd431 calc(50% + 0.5px), transparent calc(50% + 0.5px)), linear-gradient(transparent, transparent), linear-gradient(transparent, transparent);
background-size: 1px 100%, 1.5px 100%, 100% 1px, 100% 1.5px, 65px 65px, 100% 100%, 100% 100%;
background-position: 0% 0%, 100% -65px, 0px 0%, -65px 100%, 100% 100%, -65px 50%, 100% 65px;
}
You can try like below, a combination of gradient and clip-path which is easier to handle
.box {
margin:10px;
height:200px;
border: 2px solid red;
background:
linear-gradient(to bottom right,transparent 50%,red 50.5%)
bottom right/50px 50px no-repeat;
clip-path:polygon(0 0,100% 0,100% calc(100% - 50px),calc(100% - 50px) 100%, 0 100%);
}
body {
background:yellow;
}
<div class="box"></div>
With CSS variable to easily adjust the corner:
.box {
--c:50px;
margin:10px;
height:200px;
border: 2px solid red;
background:
linear-gradient(to bottom right,transparent 50%,red 50.5%)
bottom right/var(--c) var(--c) no-repeat;
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%, 0 100%);
}
body {
background:yellow;
}
<div class="box"></div>
<div class="box" style="--c:100px;"></div>
Related
please have a look at my exampleI have added background color, and now i want to slice some point and must be with background transparent like i added
.single_cat_list_in .meta:before {
content: "";
width: 20px;
height: 20px;
background: #ffffff !important;
position: absolute;
right: -35px;
bottom: -10px;
border-radius: 50%;
border-left: 1px solid rgba(0, 0, 0, 0.5);
}
https://prnt.sc/pi94k5
You can use multiple linear and radial gradients to create the rounded corners (taken from this article):
.item {
height: 100px;
background:
linear-gradient(45deg, transparent 10px, gold 0) top left,
linear-gradient(315deg, transparent 10px, gold 0) top right,
linear-gradient(225deg, transparent 10px, white 0) bottom right,
linear-gradient(135deg, transparent 10px, white 0) bottom left;
background-image:
radial-gradient(circle at 0 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 0, transparent 14px, white 15px),
radial-gradient(circle at 0 0, transparent 14px, white 15px);
background-size: 50% 50%;
background-repeat: no-repeat;
}
body {
background: silver;
}
<div class="item"></div>
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/
Good morning,
I want to have the same background as in header, where is line gradient.
html, body { margin: 0; background: #d8dfe9;}
header{position: relative; height: 90px; width: 100%; background: linear-gradient(to right, #045FB4 0%,#00BFFF 100%);}
header:after {content: ''; position: absolute; left: calc(50% - 4.8px); top: 90px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid blue; clear: both; z-index: 1;}
main {position: relative; overflow: auto; ; height: 100vh;}
main #timeline {position: relative; width: 100%; height: 70px; background: white}
<header>
</header>
<main>
<div id="timeline">
</div>
</main>
Please, can you help me?
The easiest solution is to use clip-path
html,
body {
margin: 0;
background: #d8dfe9;
}
header {
position: relative;
height: 90px;
width: 100%;
background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%);
-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 10px), calc(50% + 10px) calc(100% - 10px), 50% 100%, calc(50% - 10px) calc(100% - 10px), 0% calc(100% - 10px));
}
<header>
</header>
Or you can use more gradient if you want better support than clip-path but without transparency:
html,
body {
margin: 0;
background: #d8dfe9;
}
header {
position: relative;
height: 90px;
width: 100%;
background: linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
position:relative;
}
header:before {
content:"";
position:absolute;
width:20px;
height:10px;
top:100%;
right:calc(50% - 10px);
background:
linear-gradient(to bottom left,transparent 49%,#d8dfe9 50.5%) left/50% 100% no-repeat,
linear-gradient(to bottom right,transparent 49%,#d8dfe9 50.5%) right/50% 100% no-repeat,
linear-gradient(to right, #045FB4 0%, #00BFFF 100%) fixed;
}
<header>
</header>
I'm trying to style an <a> tag with a gradient background and a gradient border.
I followed a tutorial online and tweaked it with the right colours, however then realised it needs to set the background-image property in order to give the borders a gradient.
.btn-primary {
background-color: blue;
background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 10% 100%;
border-bottom: 4px solid #f15a24;
border-top: 4px solid #f7931e;
box-sizing: border-box;
margin: 50px auto;
}
Is there a way I can modify the code so that I can specify a different gradient for the background of the button?
you can use border-image for the border, and just use background-image for the background gradient. Just like this:
.btn-primary {
background-color: blue;
background-image: linear-gradient(to bottom, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%);
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 10% 100%;
border-bottom: 4px solid #f15a24;
border-top: 4px solid #f7931e;
box-sizing: border-box;
margin: 50px auto;
border-image: linear-gradient(to left, #f7931e 0%, #f15a24 100%), linear-gradient(to bottom, #f7931e 0%, #f15a24 100%
}
You could probably apply your rule to a pseudo-element :before or :after and then position the pseudo-element over your anchor.
how to add a pseudo-element gradient effect
Hope that helps!
Here is a way to create the illusion of a gradient border using multiple background gradients:
.btn-primary {
display:inline-block;
padding:80px;
background: linear-gradient(to bottom, transparent 0, transparent 30px, blue 30px, white calc(100% - 30px), transparent calc(100% - 30px), transparent 100%), linear-gradient(to left, red 0%, yellow 100%);
background-repeat: no-repeat;
background-position: 30px 0, 0 0;
background-size: calc(100% - 60px), auto;
}
<a class="btn-primary">test</a>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
I'm trying to build a circle with 8 colors, could you please help me to tweak the code above?
Use following css:
div {
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
}
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, lightgreen 50%, blue 50%),
linear-gradient(-45deg, green 50%, darkgreen 50%),
linear-gradient(-45deg, #e5e500 50%, yellow 50%),
linear-gradient(45deg, tomato 50%, red 50%);
background-size: 50% 50%;
background-position: 0% 0%, 100% 0%, 0 100%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
div {
width: 200px;
height: 200px;
border-radius:100%;
background: linear-gradient(45deg, yellow 0%, yellow 50%, blue 50%, blue 100%), linear-gradient(135deg, gray 0%, gray 50%, green 50%, green 100%), linear-gradient(-45deg, black 0%, black 50%, #b2dba1 50%, #b2dba1 100%) , linear-gradient(-135deg, red 0%, red 50%, orange 50%, orange 100%);
background-size: 50% 50%;
background-position: 0% 0%,0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
<div></div>
Or with something like this.
Here you can add as many slices you want.
But its a little bit longer than the other solutions.
If you want to read more about this here is the right place.
.pie {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 50px, 100px, 0px);
}
.hold {
position: absolute;
width: 100px;
height: 100px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
clip: rect(0px, 100px, 100px, 50px);
}
#pieSlice1 .pie {
z-index:8;
background-color: #1b458b;
-webkit-transform:rotate(50deg);
-moz-transform:rotate(50deg);
-o-transform:rotate(50deg);
transform:rotate(50deg);
}
#pieSlice2 .pie {
z-index:7;
background-color: red;
-webkit-transform:rotate(100deg);
-moz-transform:rotate(100deg);
-o-transform:rotate(100deg);
transform:rotate(100deg);
}
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>