OLD | NEW |
---|---|
1 <!DOCTYPE html> | |
1 <style> | 2 <style> |
2 div.test { | 3 .test { |
3 width: 100px; | 4 width: 100px; |
4 height: 100px; | 5 height: 100px; |
5 -webkit-writing-mode: vertical-lr; | 6 -webkit-writing-mode: vertical-lr; |
6 -webkit-columns: 2; | 7 -webkit-columns: 2; |
7 -webkit-column-rule: 50 solid orange; | 8 -webkit-column-rule: 50px solid orange; |
8 -webkit-column-gap: 50px; | 9 -webkit-column-gap: 50px; |
9 columns: 2; | |
10 column-rule: 50 solid orange; | |
11 column-gap: 50px; | |
12 column-fill: auto; | |
13 } | 10 } |
14 | 11 |
15 div.test div { width: 200px; } | 12 .left { -webkit-border-before: 50px solid blue; } |
mstensho (USE GERRIT)
2014/11/04 21:47:47
Maybe be a bit more consistent here? left + border
andersr
2014/11/06 11:32:54
Done.
| |
13 .right { -webkit-border-after: 50px solid blue; } | |
14 | |
15 .test div { width: 200px; } | |
16 </style> | 16 </style> |
17 <div class="test" style="-webkit-border-before: 50px solid blue;"><div></div></d iv> | 17 <p>There should be a 50px blue border to the left of an orange rectangle:</p> |
18 <div class="test" style="-webkit-border-after: 50px solid blue;"><div></div></di v> | 18 <div class="test left"><div></div></div> |
19 <p>There should be a 50px blue border to the right of an orange rectangle:</p> | |
20 <div class="test right"><div></div></div> | |
OLD | NEW |