blob: e2b23ceba306045211a47fc03dfe069b0b2caddc (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>Choose the correct gradient repeat count even when there's a non-identity pattern matrix</title>
<style>
html {
overflow: hidden;
}
div {
box-sizing: border-box;
width: 240px;
height: 320px;
/* Scale a 240x320 gradient down by a factor of 8 into a 30x40 border image. */
/* 240x320 gives a diagonal of 400px, so we should get 5 repetitions of a 80px long gradient. */
/* tan(36.8698976deg) == 240 / 320 */
border-left: 30px solid;
border-top: 40px solid;
border-image: repeating-linear-gradient(-36.8698976deg, blue, blue 40px, lime 40px, lime 80px);
}
</style>
<div></div>
|
