NoSuchMethodError: Class 'String' has no instance method '[]=' - json

The server responses Json that encoded to utf8. The code below works only if I use json.decode twice. After first decoding the utf8 string gives a string instead of a Map. Why do I have to use json.decode twice to get the Map? Is there a more clean way of doing this?
final bytes = (await ipfsClient.cat(Hash(cid: ipfsCid))).data;
final decodedBytes = utf8.decode(bytes);
final alreadyDecoded = json.decode(decodedBytes);
final accountIpfs = json.decode(alreadyDecoded);
accountIpfs['profile'] = newCid;
print('${bytes.runtimeType}, $bytes');
print('${decodedBytes.runtimeType}, $decodedBytes');
print('${alreadyDecoded.runtimeType}, $alreadyDecoded');
print('${accountIpfs.runtimeType}, $accountIpfs');
Uint8List, [34, 123, 92, 34, 115, 111, 99, 105, 97, 108, 95, 97, 99, 99, 111, 117, 110, 116, 92, 34, 58, 92, 34, 81, 109, 87, 113, 104, 122, 110, 81, 52, 72, 107, 85, 71, 112, 116, 99, 52, 54, 86, 90, 87, 97, 98, 110, 111, 112, 83, 122, 90, 52, 82, 76, 74, 88, 70, 117, 111, 115, 110, 77, 121, 120, 117, 106, 118, 110, 92, 34, 44, 92, 34, 112, 114, 111, 102, 105, 108, 101, 92, 34, 58, 92, 34, 81, 109, 99, 56, 89, 72, 54, 117, 80, 82, 51, 54, 104, 113, 53, 51, 66, 118, 65, 99, 110, 101, 104, 116, 102, 72, 54, 86, 116, 70, 78, 69, 53, 111, 75, 116, 99, 113, 80, 82, 51, 102, 74, 97, 53, 70, 92, 34, 44, 92, 34, 97, 98, 111, 117, 116, 92, 34, 58, 92, 34, 81, 109, 90, 86, 110, 106, 97, 117, 114, 71, 49, 111, 77, 87, 68, 54, 121, 103, 86, 87, 110, 83, 106, 83, 49, 116, 89, 106, 70, 101, 97, 99, 82, 112, 51, 116, 97, 83, 112, 120, 52, 50, 49, 84, 53, 75, 92, 34, 44, 92, 34, 98, 117, 115, 105, 110, 101, 115, 115, 92, 34, 58, 92, 34, 81, 109, 82, 110, 88, 81, 82, 56, 117, 76, 57, 85, 76, 71, 116, 84, 98, 121, 98, 120, 109, 52, 88, 57, 54, 107, 52, 55, 53, 66, 101, 118, 103, 57, 100, 52, 90, 113, 86, 50, 99, 99, 86, 67, 69, 83, 92, 34, 125, 34]
String, "{\"social_account\":\"QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn\",\"profile\":\"Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F\",\"about\":\"QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K\",\"business\":\"QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES\"}"
String, {"social_account":"QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn","profile":"Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F","about":"QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K","business":"QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES"}
_InternalLinkedHashMap<String, dynamic>, {social_account: QmWqhznQ4HkUGptc46VZWabnopSzZ4RLJXFuosnMyxujvn, profile: Qmc8YH6uPR36hq53BvAcnehtfH6VtFNE5oKtcqPR3fJa5F, about: QmZVnjaurG1oMWD6ygVWnSjS1tYjFeacRp3taSpx421T5K, business: QmRnXQR8uL9ULGtTbybxm4X96k475Bevg9d4ZqV2ccVCES}

Related

Why is MySQL2 execute command returning a buffer in Nodejs

I'm using mysql2/promise to run some sql queries. Here is my query:
requests = await conn.execute(
'SELECT * FROM friend_requests WHERE (requester=? AND acceptor=?) OR (requester=? AND acceptor=?)',
[ 1, 2, 2, 1]
);
When I run this command I get the following results:
{
"message": [
[],
[
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 10,
"_schemaLength": 7,
"_schemaStart": 14,
"_tableLength": 15,
"_tableStart": 22,
"_orgTableLength": 15,
"_orgTableStart": 38,
"_orgNameLength": 9,
"_orgNameStart": 64,
"characterSet": 224,
"encoding": "utf8",
"name": "requester",
"columnLength": 1024,
"columnType": 253,
"flags": 20483,
"decimals": 0
},
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 91,
"_schemaLength": 7,
"_schemaStart": 95,
"_tableLength": 15,
"_tableStart": 103,
"_orgTableLength": 15,
"_orgTableStart": 119,
"_orgNameLength": 8,
"_orgNameStart": 144,
"characterSet": 224,
"encoding": "utf8",
"name": "acceptor",
"columnLength": 1024,
"columnType": 253,
"flags": 20491,
"decimals": 0
},
{
"_buf": {
"type": "Buffer",
"data": [
1,
0,
0,
1,
3,
77,
0,
0,
2,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
9,
114,
101,
113,
117,
101,
115,
116,
101,
114,
12,
224,
0,
0,
4,
0,
0,
253,
3,
80,
0,
0,
0,
75,
0,
0,
3,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
8,
97,
99,
99,
101,
112,
116,
111,
114,
8,
97,
99,
99,
101,
112,
116,
111,
114,
12,
224,
0,
0,
4,
0,
0,
253,
11,
80,
0,
0,
0,
73,
0,
0,
4,
3,
100,
101,
102,
7,
67,
111,
109,
114,
97,
100,
101,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
15,
102,
114,
105,
101,
110,
100,
95,
114,
101,
113,
117,
101,
115,
116,
115,
7,
99,
114,
101,
97,
116,
101,
100,
7,
99,
114,
101,
97,
116,
101,
100,
12,
63,
0,
19,
0,
0,
0,
7,
128,
4,
0,
0,
0,
5,
0,
0,
5,
254,
0,
0,
34,
0,
5,
0,
0,
6,
254,
0,
0,
34,
0
]
},
"_clientEncoding": "utf8",
"_catalogLength": 3,
"_catalogStart": 170,
"_schemaLength": 7,
"_schemaStart": 174,
"_tableLength": 15,
"_tableStart": 182,
"_orgTableLength": 15,
"_orgTableStart": 198,
"_orgNameLength": 7,
"_orgNameStart": 222,
"characterSet": 63,
"encoding": "binary",
"name": "created",
"columnLength": 19,
"columnType": 7,
"flags": 1152,
"decimals": 0
}
]
]
}
What is this? I thought I would get something like requests[0].column_name. Am I doing the query wrong?

It turns out await conn.execute will only return the fields of the table if there are 0 results.
Therefore, you have to specify rows as a variable in order to get the empty array of rows as follows:
const [rows, fields] = await conn.execute(
'SELECT * FROM friend_requests WHERE (requester=? AND acceptor=?) OR (requester=? AND acceptor=?)',
[ 1, 2, 2, 1]
);
Now rows will have the rows returned in the query and fields is an array of fields (the buffer that is being returned in the question).

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>

CSS transform: perspective #html2canvas

І 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);
}

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);
}