如何製作響應條紋

我正在用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

如何製作響應條紋

回答

相關問題