Можно ли сделать эту фигуру в CSS3?

Можно ли сделать эту фигуру в CSS3?

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

Я видел эту ссылку http://css-tricks.com/examples/ShapesOfCSS/, Я не знаю, можно ли отредактировать какую-либо форму на этой странице, чтобы она выглядела как форма, которая мне нужна.

Спасибо..


html css css-shapes shape
person user1118829    schedule 23.10.2013    source источник
comment
Должен ли он быть точно таким же, как на картинке? Потому что левая и правая стороны этого прямоугольника не параллельны. Это усложняет проблему.   -  person matewka    schedule 23.10.2013
comment
См. CSS 3 3D-преобразования. 24ways.org/2010/intro-to-css-3d-transforms   -  person Ming-Tang    schedule 18.07.2014

Ответы (2)


arrow_upward
1
arrow_downward

FIDDLE

Вот мой подход:

div {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;

    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;
}
div:after {
    content: "";
    display: block;
    position: absolute;
    border-style: solid;
    border-color: #FFF transparent transparent;
    border-width: 127px 0 25px 19px;
    right: 0;
}
div:before {
    background: rgba(255, 0, 0, 0.45);
    width: 668px;
    height: 240px;
    content: "";
    display: block;

    -webkit-transform-origin: top left;
    -moz-transform-origin: top left;
    -ms-transform-origin: top left;
    -o-transform-origin: top left;
    transform-origin: top left;

    -webkit-transform: rotate(-9.5deg) skewX(1deg);
    -moz-transform: rotate(-9.5deg) skewX(1deg);
    -ms-transform: rotate(-9.5deg) skewX(1deg);
    -o-transform: rotate(-9.5deg) skewX(1deg);
    transform: rotate(-9.5deg) skewX(1deg);
}

Думаю, решение jingesh kheni могло бы быть более чистым, но я попробовал его, и почему-то свойство perspective у меня не работает.

РЕДАКТИРОВАТЬ:
Согласно комментарию OP о грубых краях div, я обновил скрипку и приведенный выше код. Я просто добавил эту строку CSS:

-webkit-backface-visibility: hidden;

Эти острые углы являются ошибкой в ​​Chrome, вот объяснение.

person matewka    schedule 23.10.2013
comment
Спасибо. Он работает нормально, но если я удалю изображение ‹img src = i.stack.imgur.com/ OsNL8.jpg ›сверху не гладко. - person user1118829; 23.10.2013
comment
Замечательно! Большое вам спасибо, но вы, вероятно, захотите отредактировать Fiddle, чтобы обеспечить поддержку всех браузеров, таких как код, который вы написали выше. - person user1118829; 23.10.2013
comment
Скрипка обновлена. Конечно, свойство -webkit-backface-visibility предназначено только для Chrome. - person matewka; 23.10.2013

arrow_upward
3
arrow_downward

поместите это в свой css свою форму div

 -webkit-transform: rotatey(16deg);
 -moz-transform: rotatey(16deg);
 transform: rotatey(16deg); 
 position: absolute;

поместите этот код в свой родительский div вашей формы div

-webkit-perspective: 175;
-moz-perspective: 175;
perspective: 175;
position: relative;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;

этот код может иметь форму, которая будет вам нужна, и установить высоту, ширину и другие CSS в соответствии с вашими требованиями. этот код не работает в старом браузере, например, например.

и вы можете создавать различные формы и CSS, которые вы хотите, с помощью программного обеспечения для веб-дизайна Google.

вот ссылка: https://www.google.com/webdesigner/

person jignesh kheni    schedule 23.10.2013
comment
Можете ли вы дать ответ на скрипку? Мне очень любопытны результаты, но почему-то я не могу заставить perspective работать. - person matewka; 23.10.2013
comment
Спасибо за скрипку, но я не думаю, что это точно так же, как изображение OP. Тем не менее, я не могу сказать, хотел ли он, чтобы все было так же. Посмотрим. - person matewka; 23.10.2013
comment
Я знаю, что это не совсем то же самое, что изображение OP, но мой код может ему помочь. - person jignesh kheni; 23.10.2013
comment
Ваш код параллелен со сторон, а не как изображение. Но если бы у меня не было решения. Думаю, я воспользуюсь веб-дизайнером Google, отличная идея! Спасибо. - person user1118829; 23.10.2013