如何制作响应式条纹答案

【问题标题】：How to make a responsive stripe如何制作响应式条纹
【发布时间】：2016-12-25 16:46:00
【问题描述】：

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

【问题讨论】：

标签： html css twitter-bootstrap rotation translate

【解决方案1】：

容器基本上使用了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>

【讨论】：