How to create a `
` with a sloped edge

Question

I'm trying to make the following shape in CSS:

enter image description here

I can do it using rotations but the problem is that I need to have a background image that doesn't get rotated.

Are you overlaying the background onto this `div`? Either way, [this question](http://stackoverflow.com/questions/5293736/css3-transform-skew) might prove helpful. — royhowie, Jul 23 '14 at 16:06
@epascarello thanks, but those weren't working with % widths :( — Taimur, Jul 23 '14 at 16:18

score 0 · Accepted Answer · answered Jul 23 '14 at 16:14

#box {
    width: 200px;
    height: 200px;
    background: black;
    position: relative;
    -webkit-transition: all 300ms ease-in;
}
#box:hover {
    -webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after {
    display: block;
    content: "\0020";
    color: transparent;
    width: 211px;
    height: 45px;
    background: white;
    position: absolute;
    left: 1px;
    bottom: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}

score 0 · Answer 2 · answered Jul 23 '14 at 16:19

0

HTML

<div id='s'></div>

CSS

 #s {
    width:0px;
    height:0px;
    border:none;
    border-left:400px solid #000;
    border-top:400px solid #000;
    border-bottom:200   px solid #fff;
  }

http://jsfiddle.net/xvm7K/

answered Jul 23 '14 at 16:19

user2320601

162
2

How to create a `` with a sloped edge

2 Answers2

How to create a `
` with a sloped edge