CSS transform: perspective #html2canvas - html

І use html2canvas for save div as image.
Сan i save div with CSS transform: perspective?
I mean something like this:
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: perspective(200px) rotateY(45deg);
}
or
#div2 {
background: linear-gradient(to right, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
width: 60px;
height: 90px;
transform: matrix3d(1, 0, 0, -0.008, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0.23, 1);
}

Related

How to create this button with CSS?

How would one create the following button using CSS?
The fact that it is skewed is not the issue. The part I'm not sure about is the diagonal split in color that's positioned from corner to corner. Im not sure how to define a gradient in such a way that it would work for all button dimensions responsively.
I have the following so far, for a skewed button without the diagonal difference in color.
button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
But I'm sure a lot of that will all have to change.

Here is a gradient solution that will work with any size:
button.btn {
color: white;
background:linear-gradient(to bottom right, #e80027 49%,#d20024 50%);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>
<button class="btn" ><span>View Demo Demoooo</span></button>
<button class="btn" ><span>View </span></button>

Use Gradient CSS generator to get any sort of gradient backgrounds..
button.btn {
color: white;
background: rgba(248, 80, 50, 1);
background: -moz-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(248, 80, 50, 1)), color-stop(50%, rgba(241, 111, 92, 1)), color-stop(51%, rgba(246, 41, 12, 1)), color-stop(71%, rgba(240, 47, 23, 1)), color-stop(100%, rgba(231, 56, 39, 1)));
background: -webkit-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -o-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: -ms-linear-gradient(-45deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
background: linear-gradient(135deg, rgba(248, 80, 50, 1) 0%, rgba(241, 111, 92, 1) 50%, rgba(246, 41, 12, 1) 51%, rgba(240, 47, 23, 1) 71%, rgba(231, 56, 39, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn"><span>View Demo</span></button>

Try this:
.btn{
background-color: #34ADFF;
background-image: -webkit-linear-gradient(-68deg, #e80027 50%, #d20024 50%);
border:0px;
padding:20px 25px;
font-size:17px;
-webkit-transform:skew(-30deg);
-moz-transform:skew(-30deg);
-o-transform:skew(-30deg);
transform:skew(-30deg);
color:#fff;
margin-left:20px;
}
<button class="btn" ><span>View Demo</span></button>

button.btn {
color: white;
background-color: red;
padding: 10px 20px;
line-height: 1;
border: none;
transform: skewX(-25deg);
cursor: pointer;
background: linear-gradient(165deg, rgba(245, 80, 50, 1) 0%, rgba(245, 111, 92, 1) 50%, rgba(230, 41, 12, 1) 51%, rgba(230, 47, 23, 1) 71%, rgba(230, 56, 39, 1) 100%);
}
button.btn span {
display: block;
transform: skewX(25deg);
}
<button class="btn" ><span>View Demo</span></button>

How to display the CSS gradient generated by Illustrator?

As a designer I can extract this CSS code from Illustrator:
.test
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
position : absolute ;
left : 215px;
top : 151px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}
I tried in the browser like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
/* css code here */
</style>
</head>
<body>
<div class="test" id="test"> </div>
</body>
</html>
What am i missing?
It is a gradient rectangle, is should look like this:

You need to set the width and height of the element with the gradient applied to it in the CSS:
.test {
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
position : absolute ;
left : 100px;
top : 50px;
width:300px;
height: 150px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
}
<div class="test" id="test"> </div>

You have forgot to set width and height.. check updated snippet below..
.test
{
background : -moz-linear-gradient(0% 50% 0deg,rgba(41, 150, 204, 1) 0%,rgba(45, 130, 189, 1) 8.39%,rgba(53, 89, 158, 1) 28.7%,rgba(59, 56, 134, 1) 48.5%,rgba(63, 32, 116, 1) 67.39%,rgba(66, 18, 106, 1) 84.98%,rgba(67, 13, 102, 1) 100%);
background : -webkit-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -webkit-gradient(linear,0% 50% ,100% 50% ,color-stop(0,rgba(41, 150, 204, 1) ),color-stop(0.0839,rgba(45, 130, 189, 1) ),color-stop(0.287,rgba(53, 89, 158, 1) ),color-stop(0.485,rgba(59, 56, 134, 1) ),color-stop(0.6739,rgba(63, 32, 116, 1) ),color-stop(0.8498,rgba(66, 18, 106, 1) ),color-stop(1,rgba(67, 13, 102, 1) ));
background : -o-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
background : -ms-linear-gradient(0deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC', endColorstr='#430D66' ,GradientType=0)";
background : linear-gradient(90deg, rgba(41, 150, 204, 1) 0%, rgba(45, 130, 189, 1) 8.39%, rgba(53, 89, 158, 1) 28.7%, rgba(59, 56, 134, 1) 48.5%, rgba(63, 32, 116, 1) 67.39%, rgba(66, 18, 106, 1) 84.98%, rgba(67, 13, 102, 1) 100%);
/* position : absolute ;
left : 215px;
top : 151px;*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2996CC',endColorstr='#430D66' , GradientType=1);
width: 300px;
height: 200px;
}
<div class="test"></div>

How to create multi color top border with background on a div?

Is it possible to create a two dimensional gradient like the following image?
Currently, I can achieve only one of the following two i.e to right Or bottom
background: rgba(247,149,29,1);
background: -moz-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(247,149,29,1)), color-stop(16%, rgba(247,149,29,1)), color-stop(17%, rgba(237,28,35,1)), color-stop(33%, rgba(237,28,35,1)), color-stop(34%, rgba(43,56,144,1)), color-stop(56%, rgba(43,56,144,1)), color-stop(56%, rgba(27,118,188,1)), color-stop(57%, rgba(27,118,188,1)), color-stop(73%, rgba(27,118,188,1)), color-stop(73%, rgba(0,167,156,1)), color-stop(100%, rgba(0,167,156,1)));
background: -webkit-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -o-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -ms-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: linear-gradient(to right, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 20%, rgba(237,28,35,1) 20%, rgba(237,28,35,1) 40%, rgba(43,56,144,1) 40%, rgba(43,56,144,1) 60%, rgba(27,118,188,1) 60%, rgba(27,118,188,1) 80%, rgba(0,167,156,1) 80%, rgba(0,167,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7951d', endColorstr='#00a79c', GradientType=1 );
I want to get a right bottom gradient with mutli color on top and black on bottom.

Here are a couple of possible variants:
1- Using Multiple Backgrounds:
We can draw this shape by applying multiple background images on a div element and by precisely controlling their size.
Consider the following styles:
background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%,
#ed1c24 40%, #2b3990 40%,
#2b3990 60%, #1b75bc 60%,
#1b75bc 80%, #00a79d 80%),
linear-gradient(#333, #333);
background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;
We are using CSS3 linear-gradient() to create 2 different background images and we have used background-size property to limit the size of first image.
Note: The order of images in background-image property is important. Change in the order wouldn't produce the desired output.
Output Image:
Working Demo:
.box {
height: 100px;
background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%),
linear-gradient(#333, #333);
background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;
padding: 20px;
}
<div class="box"></div>
2- Using Pseudo Elements:
We can draw top border using a pseudo element.
Create a layer with ::before or ::after pseudo element and place it on above the parent element with position: absolute.
Create the desired background using CSS3 linear-gradient and apply this on the layer create above.
Working Demo:
.box {
position: relative;
background: #333;
padding: 20px;
height: 60px;
}
.box::before {
background: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%) no-repeat;
position: absolute;
content: '';
height: 8px;
width: 100%;
left: 0;
top: 0;
}
<div class="box"></div>

You can use :after element to get something like the image you provided:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.gradient {
position: relative;
height: 80px;
background: rgba(247, 149, 29, 1);
background: -moz-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -webkit-gradient(
left top,
right top,
color-stop(0%, rgba(247, 149, 29, 1)),
color-stop(16%, rgba(247, 149, 29, 1)),
color-stop(17%, rgba(237, 28, 35, 1)),
color-stop(33%, rgba(237, 28, 35, 1)),
color-stop(34%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(27, 118, 188, 1)),
color-stop(57%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(0, 167, 156, 1)),
color-stop(100%, rgba(0, 167, 156, 1))
);
background: -webkit-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -o-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -ms-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: linear-gradient(
to right,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 20%,
rgba(237, 28, 35, 1) 20%,
rgba(237, 28, 35, 1) 40%,
rgba(43, 56, 144, 1) 40%,
rgba(43, 56, 144, 1) 60%,
rgba(27, 118, 188, 1) 60%,
rgba(27, 118, 188, 1) 80%,
rgba(0, 167, 156, 1) 80%,
rgba(0, 167, 156, 1) 100%
);
}
.gradient:after {
content: '';
bottom: 0;
position: absolute;
height: 80%;
width: 100%;
background: #333;
}
<div class="gradient">
</div>
EDIT: Since you want to show some text, it's better to use inner div instead of :after pseudo-element:
* {
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.gradient {
position: relative;
height: 80px;
background: rgba(247, 149, 29, 1);
background: -moz-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -webkit-gradient(
left top,
right top,
color-stop(0%, rgba(247, 149, 29, 1)),
color-stop(16%, rgba(247, 149, 29, 1)),
color-stop(17%, rgba(237, 28, 35, 1)),
color-stop(33%, rgba(237, 28, 35, 1)),
color-stop(34%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(43, 56, 144, 1)),
color-stop(56%, rgba(27, 118, 188, 1)),
color-stop(57%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(27, 118, 188, 1)),
color-stop(73%, rgba(0, 167, 156, 1)),
color-stop(100%, rgba(0, 167, 156, 1))
);
background: -webkit-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -o-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: -ms-linear-gradient(
left,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 16%,
rgba(237, 28, 35, 1) 17%,
rgba(237, 28, 35, 1) 33%,
rgba(43, 56, 144, 1) 34%,
rgba(43, 56, 144, 1) 56%,
rgba(27, 118, 188, 1) 56%,
rgba(27, 118, 188, 1) 57%,
rgba(27, 118, 188, 1) 73%,
rgba(0, 167, 156, 1) 73%,
rgba(0, 167, 156, 1) 100%
);
background: linear-gradient(
to right,
rgba(247, 149, 29, 1) 0%,
rgba(247, 149, 29, 1) 20%,
rgba(237, 28, 35, 1) 20%,
rgba(237, 28, 35, 1) 40%,
rgba(43, 56, 144, 1) 40%,
rgba(43, 56, 144, 1) 60%,
rgba(27, 118, 188, 1) 60%,
rgba(27, 118, 188, 1) 80%,
rgba(0, 167, 156, 1) 80%,
rgba(0, 167, 156, 1) 100%
);
}
.text {
background: #333;
color: #fff;
height: 80%;
width: 100%;
position: absolute;
bottom: 0;
display: flex;
align-items: center;
padding: 10px;
}
<div class="gradient">
<div class="text">Lorem Ipsum</div>
</div>

Gradient CSS arrow [duplicate]

This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 8 years ago.
How is it possible to make a CSS arrow as a gradient instead os a solid colour?
Here is my CSS"
.breadcrumbDivider .arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid gold;
position: relative;
margin-left: 360px;
}
I tried using the CSS gradient background image gradient but it takes the border parameter but unsure how to overcome this?
Here is the gradient I am trying to use...
background-color: #c9bc9e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
background-image: linear-gradient(top, #c9bc9e,#a89464);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');

I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}
<div class="arrow">
<div class="perc"></div>
</div>
Note
Originally designed for a progress bar, but hover effect can be removed if necessary.
Is suitable for a block coloured background only
So, if I cut the 'fancy stuff' and show you how it works:
Hover the one below to see the magic:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0px;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.arrow:hover:before {
border-top: 40px solid tomato;
border-bottom: 40px solid tomato;
}
.arrow:hover:after {
border-top: 100px solid yellow;
border-bottom: 100px solid blue;
}
<div class="arrow"></div>

background gradient & rotation create strange overlay

I use a bar with a rotated square as separator on my site.
The background-color is a gradient and fixed, so it creates a nice scroll effect, but when the rotated div reaches the view-port top, a strange gradient overlay appears.
Just look at it(you need to scroll slowly until the separator reaches the top of the view-port):
http://jsfiddle.net/nff2fjf7/4/
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle {
width:40px;
height:40px;
display: inline-block;
margin: 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
}
<body>
<div class="seperator">
<div class="triangle"></div>
</div>
</body>

body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle {
width:40px;
height:40px;
display: inline-block;
margin: 10px 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
background-attachment: fixed;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-repeat:no-repeat;
}
<body>
<div class="seperator">
<div class="triangle"></div>
</div>
</body>
setting background-repeat:no-repeat on .triangle seems to cure it at the top of the page, but the issue is still present at the bottom :/
Fiddle

I'm no pro with anything to do with web designs, and i have little idea on what each specific statement does, however, here's what I can tell you.
Your shapes DO NOT display with gradient. The colors you use for gradient are red/blue, and only blue is displayed
comment the following line from triangle and you'll notice your square you use for triangle actually gets a gradient! (blue to red gradient)
background-attachment: fixed;
Also, if you set background-attachment mode to scroll everywhere you'll notice the square you use for triangle gradient doesn't display as you want it to.
if you are fine with colors, you don't really need a gradient.
Edit: I've messed around with your code and if you want to keep the gradient (top to bottom) you can use this code which is your code with scroll background attachment and the triangle modified:
body {
height:800px;
}
.seperator {
margin:100px 0 0 0;
background-attachment: scroll;
background-color: rgba(0, 157, 197, 1);
background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
width:100%;
height:40px;
text-align: center;
}
.triangle{
width: 0;
height: 0;
display: inline-block;
margin: 40px 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid rgba(231, 52, 76, 1);
}