закругленная диагональная линия css

Подскажите, пожалуйста, как сделать такую ​​диагональную линию:

  • форма:

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

HTML:

<div class="block"></div>

CSS:

.block {
    margin: 50px auto;
    width: 100px;
    height: 100px;
    background: black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

Ищу информацию как это сделать но не нашел.


css border diagonal css-shapes
person Community    schedule 03.06.2013    source источник
comment
посмотрите это руководство: net .tutsplus.com/tutorials/html-css-techniques/   -  person    schedule 04.06.2013

Ответы (1)


arrow_upward
6
arrow_downward

Попробуйте 3D-преобразования - что-то вроде этого:

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

Соответствующий CSS:

body /* parent of .block in general */ {
    -webkit-perspective: 15em;
    perspective: 15em;
}
.block {
    -webkit-transform: rotateX(-5deg) rotateY(10deg);
    transform: rotateX(-5deg) rotateY(10deg);
}
person Ana    schedule 03.06.2013
comment
Спасибо, почти идеально, но не работает в IE8 и Opera 12.15. Возможно, даже в рамках содержания? Моя попытка согласования: демо - person ; 04.06.2013
comment
@ShootingStar CSS3 не поддерживается старыми браузерами. Форма в этом случае должна быть создана с использованием изображений. - person Yisela; 04.06.2013