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

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:50:05 UTC

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/