CSS Transform Skew One Side with RGBA

Sammy12 · 02-21-2012, 10:49 PM

A repost, since the previous method didn't work with rgba:
http://www.codingforums.com/showthread.php?t=252043

Live Website:
http://testingserver135.pcriot.com/updates/

Sammy12 · 02-22-2012, 08:30 PM

bumpp

sunfighter · 02-22-2012, 09:49 PM

Not the answer, but something to play with:

Code:

<style type="text/css">
#test
{
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 20px solid rgba(	205, 92, 92, .7);
border-left: 20px solid rgba(255, 255, 255, .0);
}
</style>
</head>
<body style="background-image: url('http://testingserver135.pcriot.com/updates/images/user/default/background.jpg')">
<div id="test">
</div>
</body>
</html>

Sammy12 · 02-23-2012, 03:53 AM

Thanks for responding sunfighter! <3 I decided to just use an overflow: hidden; approach.

http://testingserver135.pcriot.com/updates/index2.html

sunfighter · 02-23-2012, 04:57 AM

Sammy I just love what your are trying to do. I think I got it.

Code:

<!DOCTYPE html>
<html id=" " class="adamant compatible script window" lang="en" dir="ltr">
<head>
<title></title>
<style type="text/css">
.para
{
	width: 11px;
	height: 30px;
	-webkit-transform: skew(315deg);
	-moz-transform: skew(315deg);
	-ms-transform: skew(315deg);
	-o-transform: skew(315deg);
	transform: skew(315deg);
}
#test
{
	font-size: 0px; line-height: 0%; width: 530px;
	border-bottom: 30px solid rgba(0, 0, 0, .5);
	border-left: 30px solid rgba(255, 255, 255, .0);
}
</style>
</head>

<body style="background-image: url('http://testingserver135.pcriot.com/updates/images/user/default/background.jpg');background-position: center top;">

<div class="para" style="background-color:rgba(0, 0, 0, .65);position:absolute;left:240px;top:70px;"></div>
<div class="para" style="background-color:rgba(0, 0, 0, .65);position:absolute;left:257px;top:70px;"></div>
<div id="test" style="position:absolute;left:259px;top:70px;">
</div>
</body>
</html>

Sammy12 · 02-23-2012, 05:33 AM

That was quite impressive, definitely more efficient than mine

but I needed to have borders

and box-shadow chokes the skew, and if a browser doesn't support css transform, the .paras are not going to be skewed, but the #test will be.

http://testingserver135.pcriot.com/updates/index2.html

I'm so surprised that there isn't an easy way to skew one side! How could they have not thought of this?

sunfighter · 02-23-2012, 03:06 PM

Quote:

I'm so surprised that there isn't an easy way to skew one side! How could they have not thought of this?

There is. I once had a link to a page that helped you do just that, put your value into a box, show you the result and gave you the code, but I could not find it.