Marco Maffei Marco Maffei - 3 months ago 10
CSS Question

How to make a responsive stripe

I'm building an oblique stripe on my website with css. The problem is that I put it on my right of the screen, so the width of the band makes my website not responsive (the total width are more than 100%). I'm using bootstrap as a framework, and in oder to create a stripe I added a rotate and translate value on it. Is there any way to cut the remaining with? Here's my code:



.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>




Answer

Basically used fixed position for the container and removed the positioning of the contact-triangle and there you go!

Please check it out and let me know if this is what you were looking for. Thanks!

.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>