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

Дмитрий228

Постоялец
Регистрация
28 Май 2014
Сообщения
47
Реакции
16
Собственно вот такое Для просмотра ссылки Войди или Зарегистрируйся

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

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

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

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

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


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

особенно про то как сделать так чтобы это во всех браузерах не разъезжалось в разные стороны.
 
Обычно такие уголки делают с помощью псевдоэлементов before, after.
Для просмотра ссылки Войди или Зарегистрируйся
Я не заморачивался с позииционированием. Если блоку прописать position:relative, то псевдоэлементы при указании абсолютного позиционирования, будут намертво привязаны к этому блоку, и можно будет смело менять его метрику
 
Сверстал готовый вариант:
Код:
<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>
 
Собственно вот такое Для просмотра ссылки Войди или Зарегистрируйся

Отступ за край сделал, а вот как прикрепить сверху треугольничек хз.
Код:
content: '';                        
position: absolute; /* Абсолютное позиционирование */                      
left: 0; bottom: -16px; /* Положение треугольника */                      
border: 8px solid transparent;                          
border-top: 8px solid #385367;                        
border-right: 8px solid #385367;
Более подробно тут Для просмотра ссылки Войди или Зарегистрируйся
 
Последнее редактирование:
Внешнему блоку: position:relative;
Внутреннему: position:absolute;
И координаты картинки (top:0px; right:0px; )
 
Или:
.xxx:before{
content:" ";
position:absolute;
left:-10px;
top:-10px;
}
 
Назад
Сверху