Как сделать отзывчивую полосу

Я строю наклонную полосу на моем сайте с помощью css. Проблема в том, что я помещаю ее справа от экрана, поэтому ширина полосы делает мой сайт нечувствительным (общая ширина более 100%). Я использую bootstrap в качестве фреймворка, и для создания полосы я добавил поворот и перевод на него значения. Есть ли способ сократить оставшиеся? Вот мой код:Как сделать отзывчивую полосу

.contact-triangle { 
 
    z-index: -1; 
 
    width: 23%; 
 
    position: relative; 
 
    left: 90%; 
 
    top: -6%; 
 
    width: 263px; 
 
    -webkit-transform-origin: 0 0; 
 
    -moz-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    -o-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -moz-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -ms-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -o-transform: rotate(-37deg) translate(-92px, 22px); 
 
    transform: rotate(-37deg) translate(-92px, 22px); 
 
    background-color: white; 
 
    text-align: center; 
 
    line-height: 1.5em; 
 
    background-color: #353538; 
 
} 
 
.contact-triangle a { 
 
    margin-right: 33px; 
 
    display: block; 
 
    color: white; 
 
    padding: .5em 1em; 
 
    text-decoration: none; 
 
} 
 
.container-fluid.triangle { 
 
    max-width: 100%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel='stylesheet' id='bootstrap-css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' type='text/css' media='all' /> 
 

 
</head> 
 

 
<body> 
 
    <div class="container-fluid triangle"> 
 
    <div class="contact-triangle"> 
 
     <a href="#">Do you want to join us?</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-08-18 Marco Maffei

В основном используется fixed положение для контейнера и извлекал позиционирование contact-triangle и там вы идете!

Пожалуйста, проверьте это и дайте мне знать, если это то, что вы искали. Благодаря!

.contact-triangle { 
 
    width: 263px; 
 
    -webkit-transform-origin: 0 0; 
 
    -moz-transform-origin: 0 0; 
 
    -ms-transform-origin: 0 0; 
 
    -o-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -moz-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -ms-transform: rotate(-37deg) translate(-92px, 22px); 
 
    -o-transform: rotate(-37deg) translate(-92px, 22px); 
 
    transform: rotate(-37deg) translate(-92px, 22px); 
 
    background-color: white; 
 
    text-align: center; 
 
    line-height: 1.5em; 
 
    background-color: #353538; 
 
} 
 
.contact-triangle a { 
 
    text-align: left; 
 
    display: block; 
 
    color: white; 
 
    padding: .5em 1em; 
 
    text-decoration: none; 
 
} 
 
.container-fluid.triangle { 
 
    max-width: 100%; 
 
    position: fixed; 
 
    right: -190px; 
 
    top: 20px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    <link rel='stylesheet' id='bootstrap-css' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' type='text/css' media='all' /> 
 

 
</head> 
 

 
<body> 
 
    <div class="container-fluid triangle"> 
 
    <div class="contact-triangle"> 
 
     <a href="#">Do you want to join us?</a> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-08-18 17:27:43 kukkuz

Как сделать отзывчивую полосу

ответ

Смежные вопросы