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
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.
<!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.
This is the same technique that Paul posted. I just felt like playing. Idle hands, and all that… 
<!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>
lol - nIce demo Ron 
How about a border radius on the left to round the megaphone off
Just a trace…
<!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>
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.
FYI: You might consider trying one change…
from:
{border-right: [color=red]302px solid[/color] transparent;}
to:
{border-right: [color=blue]300px dotted[/color] transparent;}
The edge of the slope will be crisper and you will lose the 2px overhang on the right.
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.