#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Location
    West London
    Posts
    278
    Rep Power
    10

    Question 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
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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?
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Location
    West London
    Posts
    278
    Rep Power
    10
    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
  6. #4
  7. --
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Jul 2012
    Posts
    3,911
    Rep Power
    1045
    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.
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Location
    West London
    Posts
    278
    Rep Power
    10
    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.
  10. #6
  11. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    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>&uArr;</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.
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2005
    Location
    West London
    Posts
    278
    Rep Power
    10
    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>&uArr;</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;
    }

IMN logo majestic logo threadwatch logo seochat tools logo