- From: Alan Gresley <alan@css-class.com>
- Date: Thu, 18 Aug 2011 23:41:07 +1000
- To: Brian Manthos <brianman@microsoft.com>
- CC: Brad Kemper <brad.kemper@gmail.com>, "Tab Atkins Jr." <jackalmage@gmail.com>, "www-style@w3.org" <www-style@w3.org>
On 18/08/2011 1:42 PM, Brian Manthos wrote:
(snipped the code)
OK, where on the inner box is the beginning of the gradient in the code
below? I would say it's where the line crosses a circumscribed circle
around the rectangle (the same distance as the distance from the center
of the rectangle to each corner).
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=10"/>
<style type="text/css">
div div {height: 2px; width: 800px; margin-top: -1px; background: black;
position: absolute; top: 50%;
-ms-transform: rotate(-15deg);
-ms-transform-origin: 50px center;
}
.W {
outline: 1px dashed black;
display: inline-block;
height: 400px;
width: 100px;
position: relative;
}
.A15 { background-image: -ms-linear-gradient(15deg, transparent 50%, red
50%, red 75%, blue 75%); }
</style>
<!-- actual corner value is something like 14.03deg = 180 * atan(25/100)
/ PI() -->
<div class="W A15"><div></div></div>
--
Alan Gresley
http://css-3d.org/
http://css-class.com/
Received on Thursday, 18 August 2011 13:41:23 UTC