1

Suppose I have a div:

div {
    height: 100px; 
    width: 500px; 
    background: blue; 
    margin: 0 auto; 
}

enter image description here

And I want it to become two mode - skew to each side -

enter image description here

Here is the base form - http://jsfiddle.net/urielz/neybabgj/

How could I get the above two forms?

Update :

If it required using JavaScript - do it.

TylerH
  • 20,799
  • 66
  • 75
  • 101
URL87
  • 10,667
  • 35
  • 107
  • 174
  • You can't make two divs out of one without using JavaScript or some other dynamic language. You need to pick one or the other, or add another div. – TylerH Aug 19 '14 at 15:57
  • It's not clear what you are trying to do. – Paulie_D Aug 19 '14 at 15:58
  • @Paulie_D : what is not clear ? just get the div as the two attached forms ... – URL87 Aug 19 '14 at 16:00
  • 1
    This is a hammer to crack a nut! However you might want to do it like so: http://stackoverflow.com/questions/22069704/skew-one-corner-of-image. But I'd stick with triangles: http://stackoverflow.com/questions/16748387/how-to-bevel-the-corner-of-a-block-div/16748949#16748949 – Hashem Qolami Aug 19 '14 at 16:03
  • @TylerH not completely true. You can create new block elements by using :before and :after pseudo-classes – o--oOoOoO--o Aug 19 '14 at 16:03
  • @denisol Correct, but I don't think that's what URL87 is trying to do here. At least, it's hard to tell without more information. – TylerH Aug 19 '14 at 16:06
  • @TylerH I am assuming he needs the shape, as he mentioned "forms", hence my answer below. :) – o--oOoOoO--o Aug 19 '14 at 16:17

2 Answers2

4

JSiddle Demo

CSS

div {
    height : 100px;
    width : 500px;
    background : blue;
    margin : 10px auto;
    position: relative;
}
div:first-child:before {
    position: absolute;
    top:0;
    right:100%;
    width:0;
    height:0;
    content:'';
    border:50px solid blue;
    border-top-color:transparent;
    border-left-color:transparent;
}

div:nth-child(2):after {
    position: absolute;
    top:0;
    left:100%;
    width:0;
    height:0;
    content:'';
    border:50px solid blue;
    border-bottom-color:transparent;
    border-right-color:transparent;
}
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
2

HTML

<div class="crop">
    <div class="skew"></div>
</div>

CSS

.crop {
    width: 492px;
    height: 240px;
    overflow: hidden;
}
.skew {
    display: block;
    height : 100px;
    width : 500px;
    background : blue;
    margin : 0 auto 0 32px;
    position:relative;
    -webkit-transform: skew(-30deg);
    -moz-transform: skew(-30deg);
    -ms-transform: skew(-30deg);
    transform: skew(-30deg);
}
.skew:after {
    height : 100px;
    width : 500px;
    background : blue;
    margin : 0 auto;
    position:absolute;
    bottom: -120px;
    content:'';
}

Fiddle: http://jsfiddle.net/neybabgj/7/

o--oOoOoO--o
  • 770
  • 4
  • 7