Как сверстать заворачивающийся край блока?

[Дмитрий228]

Собственно вот такое Для просмотра ссылки Войди или Зарегистрируйся

Отступ за край сделал, а вот как прикрепить сверху треугольничек хз.

 

[Reserv]

Просто делаешь на CSS треугольник и присабачиваешь его к прямоугольнику по средствам позиционирования или марджинами.

Вот куча ссылок о том как рисовать геометрические фигуры CSS-ом:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

Также, в сети есть куча конструкторов фигур:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

 

[Дмитрий228]

Просто делаешь на CSS треугольник и присабачиваешь его к прямоугольнику по средствам позиционирования или марджинами.

Вот куча ссылок о том как рисовать геометрические фигуры CSS-ом:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

Также, в сети есть куча конструкторов фигур:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся

Про то как нарисовать эт понятно, вот " присабачиваешь его к прямоугольнику по средствам позиционирования или марджинами." вот тут не понятно.

особенно про то как сделать так чтобы это во всех браузерах не разъезжалось в разные стороны.

 

[zALEHANz]

Обычно такие уголки делают с помощью псевдоэлементов before, after.
Для просмотра ссылки Войди или Зарегистрируйся
Я не заморачивался с позииционированием. Если блоку прописать position:relative, то псевдоэлементы при указании абсолютного позиционирования, будут намертво привязаны к этому блоку, и можно будет смело менять его метрику

 

[Reserv]

Сверстал готовый вариант:

<style> 
    .wrap {
        position: absolute;
        top: 63px;
        left: 45px;
    }
    .triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 9px 16px;
        border-color: transparent transparent #660e0c transparent; 
    } 
    .rectangle {
        width: 226px;
        height: 20px;
        padding: 14px 0 10px 116px;
        background-color: #892a28;
        font-family: Arial;
        font-size: 14px;
        color: #fff;     
    }
</style>

<div class="wrap">
    <div class="triangle"></div>
    <div class="rectangle">Свежие коллекции</div>
</div>

 

[Barok]

Собственно вот такое Для просмотра ссылки Войди или Зарегистрируйся

Отступ за край сделал, а вот как прикрепить сверху треугольничек хз.

content: '';                        
position: absolute; /* Абсолютное позиционирование */                      
left: 0; bottom: -16px; /* Положение треугольника */                      
border: 8px solid transparent;                          
border-top: 8px solid #385367;                        
border-right: 8px solid #385367;

Более подробно тут Для просмотра ссылки Войди или Зарегистрируйся

 

[$_Maclay]

Здравствуйте, вот сверстал за пять минут готовый вариант Для просмотра ссылки Войди или Зарегистрируйся

 

[kavs]

Внешнему блоку: position:relative;
Внутреннему: position:absolute;
И координаты картинки (top:0px; right:0px; )

 

[vitea777]

Или:
.xxx:before{
content:" ";
position:absolute;
left:-10px;
top:-10px;
}

 

[Hamelyon]

Вот полезная статья на хабре со всеми фигурами на css Для просмотра ссылки Войди или Зарегистрируйся