Как да създадете div, който е изкривен от едната страна

Вътре в div ще има някакъв текст и трябва да мога да задам височината и ширината на div на auto, така че да преоразмерява според текста вътре. Ъгълът на наклон ще бъде 45*

въведете описание на изображението тук


html css css-shapes
person iitum studant    schedule 06.05.2015    source източник
comment
Проверете css-tricks.com/examples/ShapesOfCSS/#trapezoid   -  person ketan    schedule 06.05.2015
comment
Трябва да използвате :after. Демо: jsfiddle.net/Lyqjkkbo   -  person QArea    schedule 06.05.2015

Отговори (1)


arrow_upward
0
arrow_downward

Опитайте тази

CSS

.bar {
    height: 100px;
    width: 300px;
    background: #BC5859;
    display:inline-block;
    position: relative
}

.bar:before {
    display:inline-block;
    position: absolute;
    content:"";
    border-left: 100px solid #BC5859;
    border-bottom: 100px solid transparent;
    height: 0;
    width: 0px;
    right: -100px;
    top:0;
}

ДЕМО ТУК

person Luís P. A.    schedule 06.05.2015