W3C home > Mailing lists > Public > www-style@w3.org > August 2011

Re: [css3-images] gradients keywords and logical (Re: [CSSWG] Minutes and Resolutions Telecon 2011-08-10)

From: Alan Gresley <alan@css-class.com>
Date: Thu, 18 Aug 2011 23:41:07 +1000
Message-ID: <4E4D1673.7020409@css-class.com>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:43 GMT