Как я могу исказить одну сторону div, а затем скопировать ее и исказить другую сторону?

Предположим, у меня есть div:

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

введите здесь описание изображения

И я хочу, чтобы он стал двухрежимным - перекос в каждую сторону -

введите здесь описание изображения

Вот базовая форма — http://jsfiddle.net/urielz/neybabgj/

Как я могу получить две вышеуказанные формы?

Обновление:

Если требуется использование JavaScript - сделайте это.


javascript html css skew
person URL87    schedule 19.08.2014    source источник
comment
Вы не можете сделать два элемента div из одного без использования JavaScript или какого-либо другого динамического языка. Вам нужно выбрать один или другой или добавить еще один div.   -  person TylerH    schedule 19.08.2014
comment
Непонятно, что вы пытаетесь сделать.   -  person Paulie_D    schedule 19.08.2014
comment
@TylerH: см. мое обновление   -  person URL87    schedule 19.08.2014
comment
@Paulie_D: что непонятно? просто получите div как две прикрепленные формы...   -  person URL87    schedule 19.08.2014
comment
Это молоток, чтобы расколоть орех! Однако вы можете сделать это так: /questions/22069704/перекос одного угла изображения. Но я бы придерживался треугольников: как скосить угол блока div"> stackoverflow.com/questions/16748387/   -  person Hashem Qolami    schedule 19.08.2014
comment
@TylerH не совсем верно. Вы можете создавать новые блочные элементы, используя псевдоклассы :before и :after.   -  person o--oOoOoO--o    schedule 19.08.2014
comment
@denisol Правильно, но я не думаю, что URL87 пытается сделать это здесь. По крайней мере, трудно сказать без дополнительной информации.   -  person TylerH    schedule 19.08.2014
comment
@TylerH Я предполагаю, что ему нужна форма, как он упомянул формы, поэтому мой ответ ниже. :)   -  person o--oOoOoO--o    schedule 19.08.2014

Ответы (2)


arrow_upward
2
arrow_downward

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:'';
}

Скрипт: http://jsfiddle.net/neybabgj/7/

person o--oOoOoO--o    schedule 19.08.2014

arrow_upward
4
arrow_downward

Демонстрация JSiddle

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;
}
person Paulie_D    schedule 19.08.2014