SkewY с разными значениями сверху и снизу

Я хотел бы сделать фигуру, в которой верхняя часть наклонена на -10 градусов, а нижняя - на 10 градусов, чтобы получить форму, как показано на рисунке:

div перекошено снизу и сверху

Я не могу понять, как это сделать.


css transform css-shapes skew
person Christi Yarema    schedule 22.05.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Рабочая демонстрация

Это должно помочь:

CSS

#test {
    width: 200px;
    height: 200px;
    -webkit-transition: all 300ms ease-in;
     background: black;
    position: relative;
}

#test:after, #test:before {
    display: block;
    content: "";
    color: transparent;
    width: 215px;
    height: 50px;
    background: white;
    position: absolute;
    left: -10px;
    bottom: -20px;
    -webkit-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
}
#test:before {
    bottom: auto;
    top: -20px;
    -webkit-transform: rotate(-12deg);
    -moz-transform: rotate(-12deg);
}

HTML

<div id="test"></div>
person Gurpreet Singh    schedule 22.05.2013
comment
После обзора кажется, что, возможно, CSS Perspective + Rotate будет работать хорошо. Но я не могу заставить контент не отображаться искаженно. jsfiddle.net/cyarema/G9bXT/3 - person Christi Yarema; 23.05.2013
comment
@ChristiYarema, вам нужен этот jsfiddle.net/G9bXT/4? - person Gurpreet Singh; 23.05.2013
comment
Гурприт.... ОЧЕНЬ БЛИЗКО. Спасибо. Как вы думаете, может ли содержимое быть заключено в красную рамку? Я пробовал скрыть переполнение... не сработало. Эти люди хотят, чтобы изображения и текст были обрезаны красной фигурой, а не только поверх нее. - person Christi Yarema; 23.05.2013
comment
Очень сложно понять, что именно вы хотите. Я мог бы помочь, если вы можете загрузить желаемый результат. - person Gurpreet Singh; 23.05.2013
comment
[ссылка]partyplanetxtreme.com/blog/wp-content /uploads/2013/05/ppx.png Это желаемый эффект, которого я пытаюсь достичь без использования графики. Спасибо за вашу помощь. - person Christi Yarema; 24.05.2013
comment
Хотя об этом некоторое время, но я не могу найти достойного решения CSS :(. Я думаю, вам нужно использовать изображение здесь. - person Gurpreet Singh; 24.05.2013
comment
Спасибо за помощь, Гурприт. Эти дизайнеры и их причудливые сайты... Я думаю, они пытаются доставить мне головную боль. - person Christi Yarema; 24.05.2013