October 12th, 2013, 12:36 PM
-
Slanted border using CSS3?
I'm trying to create slanted border using CSS3?
EXAMPLE SITE (scroll to right to see issue!)
Code:
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: -
Code:
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
Last edited by o0MattE0o; October 12th, 2013 at 12:51 PM.
Reason: imported CSS
October 12th, 2013, 01:16 PM
-
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?
October 12th, 2013, 04:07 PM
-
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
October 12th, 2013, 05:05 PM
-
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.
October 12th, 2013, 05:27 PM
-
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
Last edited by o0MattE0o; October 12th, 2013 at 05:39 PM.
October 12th, 2013, 09:06 PM
-
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:
Code:
<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>⇑</b></a> </div
Code:
.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;
}
Last edited by Kravvitz; October 12th, 2013 at 09:13 PM.
October 13th, 2013, 04:08 AM
-
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
Code:
<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>⇑</b></a> </div
CSS
Code:
.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;
}