OLD | NEW |
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" |
2 "http://www.w3.org/TR/html4/loose.dtd"> | 2 "http://www.w3.org/TR/html4/loose.dtd"> |
3 | 3 |
4 <html lang="en"> | 4 <html lang="en"> |
5 <head> | 5 <head> |
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
7 <title>Transform Center with Borders</title> | 7 <title>Transform Center with Borders</title> |
8 <style type="text/css" media="screen"> | 8 <style type="text/css" media="screen"> |
9 .container { | 9 .container { |
10 height: 210px; | 10 height: 210px; |
11 width: 400px; | 11 width: 400px; |
12 margin: 30px; | 12 margin: 30px; |
13 outline: 5px solid black; | 13 outline: 5px solid black; |
14 } | 14 } |
15 .box { | 15 .box { |
16 height: 100px; | 16 height: 100px; |
17 width: 200px; | 17 width: 200px; |
18 margin-bottom: 10px; | 18 margin-bottom: 10px; |
19 background-color: green; | 19 background-color: green; |
20 border-right: 50px solid gray; | 20 border-right: 50px solid gray; |
21 box-sizing: auto; | 21 box-sizing: auto; |
22 -webkit-transform: scalex(2); | 22 transform: scalex(2); |
23 -webkit-transform-origin: left; | 23 -webkit-transform-origin: left; |
24 } | 24 } |
25 .border-box { | 25 .border-box { |
26 box-sizing: border-box; | 26 box-sizing: border-box; |
27 } | 27 } |
28 </style> | 28 </style> |
29 </head> | 29 </head> |
30 <body> | 30 <body> |
31 | 31 |
32 <p> | 32 <p> |
33 <p>Top box should have gray part extending outside the black outline. Lower box
should lie inside the outline</p> | 33 <p>Top box should have gray part extending outside the black outline. Lower box
should lie inside the outline</p> |
34 <div class="container"> | 34 <div class="container"> |
35 <div class="box">box-sizing: auto</div> | 35 <div class="box">box-sizing: auto</div> |
36 <div class="box border-box">box-sizing: border-box</div> | 36 <div class="box border-box">box-sizing: border-box</div> |
37 </div> | 37 </div> |
38 </body> | 38 </body> |
39 </html> | 39 </html> |
OLD | NEW |