반응성 줄무늬를 만드는 방법

CSS로 내 웹 사이트에 비스듬한 줄무늬를 만들고 있습니다. 문제는 화면의 오른쪽에 배치했기 때문에 밴드 너비가 내 웹 사이트를 응답하지 않게 만듭니다 (총 너비는 100 % 이상입니다). 나는 프레임 워크로 부트 스트랩을 사용하고 있으며, 스트라이프를 만들기 위해 회전을 추가하고 값을 변환합니다. 나머지를자를 방법이 있습니까? 여기 내 코드는 다음과 같습니다반응성 줄무늬를 만드는 방법

.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

반응성 줄무늬를 만드는 방법

답변

관련 문제