[o0MattE0o]

I'm trying to create slanted border using CSS3?
EXAMPLE SITE (scroll to right to see issue!)

CSS
border-width: 0 0 60px 2880px;

But as you can see there is allot of over lap that I wish to remove?
I have tried: -

CSS
border-width: 0 0 60px 100%;

But this dose not work?
I can post more code up if required but cant see where I'm going wrong?

*I'm using the following imported CSS templates?
/* IMPORT CSS */
@import 'normalize.css'; = Link
@import 'bootstrap.css'; = Link

[Kravvitz]

What does CSS3 have to do with it?

Unfortunately percentages aren't allowed for the border-width values.

Matt do you mind if IE7 does not get this enhancement?

Does anybody see one of the variants to the solution to this, especially the one that does not require adding any additional elements?

[o0MattE0o]

Well not much to do with CSS3 but would like to keep to CSS3 standard... and as for IE7 No I'm going to do a simple version for older browsers...



The easy option would be to use an image but this would not scale with screen size like it dose sort of now :P

Percentages not allowed would explain allot :P

[Jacques1]

Hi,

you've set the left border-width to 2880px, so you get a left border-width of 2880px. If you don't want the width of the element to stretch the overall layout, you need to set the parent element to overflow: hidden.

[o0MattE0o]

I set it to that because its wider than most Screens
If I say set it to 1280px it still has a little over flow which like you stated setting the parent element to overflow: hidden would fix it...
but if I go over the 1280px width I get big gaps? I would like it to be 100% width of the screen

[Kravvitz]

After more thought I've come to the realization that there are multiple solutions to this, not just variants of one solution. Jacques suggested the one I first thought of.

Originally Posted by o0MattE0o

Well not much to do with CSS3 but would like to keep to CSS3 standard...

I very rarely suggest anything that's not on its way to being standardized. In case it wasn't clear, my point was that borders were in CSS1.

Originally Posted by o0MattE0o

and as for IE7 No I'm going to do a simple version for older browsers...

Do you intend to use conditional comments to give it a different stylesheet?



So this thread will make sense in the future, here's an example of the code we're discussing:

	<div class="sectionone_top top_box"></div>
		<div class="sectionone_middle">
			<! -- contents removed -->
		</div>
	<div class="sectionone_bottom bottom_box"><a href="#home" class="back2top"><b>&uArr;</b></a> </div

.top_box, .bot_box {
	width: 0px;
	height: 0px;
}
.sectionone_top {
	border-color: transparent transparent #ff9900 transparent;
	border-width: 0 0 60px 2880px;
	border-style: solid solid solid dashed;
}
.sectionone_bottom {
	border-color: transparent #ff9900 transparent transparent;
	border-width: 0 2880px 60px 0;
	border-style: solid dashed solid solid;
}
.back2top {
	display: block;
	position: absolute;
	width: 60px;
	height: 30px;
	border-radius: 25%;
	left: 50%;
	margin-left: -30px;
	bottom: 0;
	padding: 30px 0 0;
	margin-top: -30px;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	list-style:disc;
}
#sectionone .back2top {
	border: #ff9900 solid 1px;
	color: #ff9900;
}

[o0MattE0o]

Originally Posted by Kravvitz

After more thought I've come to the realization that there are multiple solutions to this, not just variants of one solution. Jacques suggested the one I first thought of.

The only issue I see with this is the bottom slanted border gets larger to the right so if I hide it, it will just look like a strait line!

Originally Posted by Kravvitz

Do you intend to use conditional comments to give it a different stylesheet?

Yes! I think this is the best way or to redirect them to a simple page...

And correct this is the current code: -
HTML

	<div class="sectionone_top top_box"></div>
		<div class="sectionone_middle">
			<! -- contents removed -->
		</div>
	<div class="sectionone_bottom bottom_box"><a href="#home" class="back2top"><b>&uArr;</b></a> </div

CSS

.top_box, .bot_box {
	width: 0px;
	height: 0px;
}
.sectionone_top {
	border-color: transparent transparent #ff9900 transparent;
	border-width: 0 0 60px 2880px;
	border-style: solid solid solid dashed;
}
.sectionone_bottom {
	border-color: transparent #ff9900 transparent transparent;
	border-width: 0 2880px 60px 0;
	border-style: solid dashed solid solid;
}
.back2top {
	display: block;
	position: absolute;
	width: 60px;
	height: 30px;
	border-radius: 25%;
	left: 50%;
	margin-left: -30px;
	bottom: 0;
	padding: 30px 0 0;
	margin-top: -30px;
	text-decoration: none;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	list-style:disc;
}
#sectionone .back2top {
	border: #ff9900 solid 1px;
	color: #ff9900;
}