SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making skewed boxes with compass and sass

    I am trying to make a skewed box like the ones on http://vies.dk as I am redesigning the page. I tried using skew(). However, I cannot seem to grasp exactly how you can achieve it using pure css?

    My attempt so far is here: http://sassmeister.com/gist/7142360 <--- which is till just bad

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm not sure you can slant one end of the skewed object. I believe it will stay the same height as in your example.

    How about using a slanted mitred border.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    .skew {
    	width:300px;
    	background:#000;
    	position:relative;
    	margin:40px 0 20px;
    	color:#fff;
    	font-weight:bold;
    	font-size:140%;
    }
    .skew:after {
    	border-bottom: 28px solid black;
    	border-right: 302px solid transparent;
    	content: " ";
    	height: 0;
    	overflow: hidden;
    	position: absolute;
    	top: -28px;
    	width: 0;
    }
    .skew p {
    	margin:0;
    	padding:0 0 0 10px;
    	position:relative;
    	z-index:2;
    	top:-10px;
    }
    </style>
    </head>
    
    <body>
    <div class="skew">
    		<p>Testing</p>
    </div>
    </body>
    </html>
    You could probably do something similar with rotating the :after element but then you would have trouble hiding the edges that stick out of the container.

  3. #3
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    This is the same technique that Paul posted. I just felt like playing. Idle hands, and all that....
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sloped Edges</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1174507-Making-skewed-boxes-with-compass-and-sass
    2013.10.24 14:45
    lsolesen
    -->
        <style type="text/css">
    
    body {
        background-color:#bdf;
    }
    
    .skew {
        width:300px;
        height:50px;
        background:#f00;
        position:relative;
        margin:100px auto 20px;
    }
    .skew:before {
        content:"";
        width:0;
        height:0;
        border-top:50px solid #f00;
        border-left:300px dotted transparent;
        position:absolute;
        bottom:-50px;
    }
    .skew:after {
        content:"";
        width:0;
        height:0;
        border-bottom:50px solid #f00;
        border-left:300px dotted transparent;
        position:absolute;
        top:-50px;
    }
    p {
        line-height:50px;
        color:#fff;
        font-weight:bold;
        font-size:150%;
        font-family:Arial,sans-serif;
        text-transform:uppercase;
        letter-spacing:.125em;
        white-space:pre;
        padding-left:1em;
        position:relative;
        z-index:1;
    }
    /* the handle */
    p:before {
        content:"";
        width:50px;
        height:16px;
        border:8px solid #f00;
        border-radius:0 0 25% 25%;
        position:absolute;
        top:100%;
        left:50%;
        -webkit-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        -ms-transform:rotate(10deg);
        -o-transform:rotate(10deg);
        transform:rotate(10deg);
        margin-top:20px;
    }
    b {vertical-align:middle;}
    b:nth-of-type(1) {font-size:1.25em}
    b:nth-of-type(2) {font-size:1.5em}
    b:nth-of-type(3) {font-size:1.75em}
    b:nth-of-type(4) {font-size:2em}
    b:nth-of-type(5) {font-size:2.5em}
    b:nth-of-type(6) {font-size:3em}
    b:nth-of-type(7) {font-size:3.5em}
    b:nth-of-type(8) {font-size:4em}
    b:nth-of-type(9) {font-size:5em}
    b:nth-of-type(10) {font-size:6em}
        </style>
    </head>
    <body>
    
    <div class="skew">
        <p><b>m</b><b>a</b><b>k</b><b>e</b> <b>n</b><b>o</b><b>i</b><b>s</b><b>e</b><b>!</b></p>
    </div>
    
    </body>
    </html>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ronpat View Post
    This is the same technique that Paul posted. I just felt like playing. Idle hands, and all that....
    lol - nIce demo Ron How about a border radius on the left to round the megaphone off

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    lol - nIce demo Ron How about a border radius on the left to round the megaphone off
    Just a trace...
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Sloped Edges</title>
    <!--
    http://www.sitepoint.com/forums/showthread.php?1174507-Making-skewed-boxes-with-compass-and-sass
    2013.10.24 14:45
    lsolesen
    -->
        <style type="text/css">
    
    body {
        background-color:#bdf;
    }
    
    .skew {
        width:300px;
        height:50px;
        background:#f00;
        position:relative;
        margin:100px auto 20px;
        border-radius:10px 0 0 10px;
        border-left:12px solid brown;
    }
    .skew:before {
        content:"";
        width:0;
        height:0;
        border-top:50px solid #f00;
        border-left:300px dotted transparent;
        position:absolute;
        bottom:-50px;
        right:0;
    }
    .skew:after {
        content:"";
        width:0;
        height:0;
        border-bottom:50px solid #f00;
        border-left:300px dotted transparent;
        position:absolute;
        top:-50px;
        right:0;
    }
    p {
        line-height:50px;
        color:#fff;
        font-weight:bold;
        font-size:150%;
        font-family:Arial,sans-serif;
        text-transform:uppercase;
        letter-spacing:.125em;
        white-space:pre;
        padding-left:1em;
        position:relative;
        z-index:1;
    }
    /* the handle */
    p:before {
        content:"";
        width:50px;
        height:16px;
        border:8px solid #f00;
        border-radius:0 0 25% 25%;
        position:absolute;
        top:100%;
        left:50%;
        -webkit-transform:rotate(10deg);
        -moz-transform:rotate(10deg);
        -ms-transform:rotate(10deg);
        -o-transform:rotate(10deg);
        transform:rotate(10deg);
        margin-top:20px;
    }
    b {vertical-align:middle;}
    b:nth-of-type(1) {font-size:1.25em}
    b:nth-of-type(2) {font-size:1.5em}
    b:nth-of-type(3) {font-size:1.75em}
    b:nth-of-type(4) {font-size:2em}
    b:nth-of-type(5) {font-size:2.5em}
    b:nth-of-type(6) {font-size:3em}
    b:nth-of-type(7) {font-size:3.5em}
    b:nth-of-type(8) {font-size:4em}
    b:nth-of-type(9) {font-size:5em}
    b:nth-of-type(10) {font-size:6em}
        </style>
    </head>
    <body>
    
    <div class="skew">
        <p><b>m</b><b>a</b><b>k</b><b>e</b> <b>n</b><b>o</b><b>i</b><b>s</b><b>e</b><b>!</b></p>
    </div>
    
    </body>
    </html>

  6. #6
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is pretty cool. I've implemented it on http://dev.kursuscenter.vih.dk for the stacked subjects. I also wanted to use it as an effect on the text over the three pictures in the buttom, but it seems that some of my existing code messed that up. Will need to investigate further on how to place the box over a picture also.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    FYI: You might consider trying one change...

    from:
    {border-right: 302px solid transparent;}
    to:
    {border-right: 300px dotted transparent;}

    The edge of the slope will be crisper and you will lose the 2px overhang on the right.

  8. #8
    SitePoint Zealot
    Join Date
    Oct 2003
    Location
    Denmark
    Posts
    129
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cool, I made that change @ronpat suggested, and it looks great. I also tried applying the same technique to the links I put over the pictures. However, the slanted box is somewhat off, see http://dev.kursuscenter.vih.dk. Is it because I am applying it to the wrong element?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by lsolesen View Post
    Cool, I made that change @ronpat suggested, and it looks great. I also tried applying the same technique to the links I put over the pictures. However, the slanted box is somewhat off, see http://dev.kursuscenter.vih.dk. Is it because I am applying it to the wrong element?
    Hi (long time no see ),

    You need a left:0 on the :after rule for that element and you will probably have to adjust the width of the border for each of those links as they are different sizes (unless you make the links all a fixed width to make things easier and more consistent). Then you can reduce the padding on the h4 so the element isn't too tall.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •