html - 如何制作响应式条纹-6ren

html - 如何制作响应式条纹

转载作者：行者123 更新时间：2023-11-28 16:06:54

25

4

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

最佳答案

基本上使用了容器的固定位置并删除了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>

关于html - 如何制作响应式条纹，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39023520/

25

4

0

文章推荐： javascript - .scrollTop 到屏幕顶部带有固定横幅的元素

文章推荐： css - 不同 div 中按钮的垂直间距相等

文章推荐： javascript - 在一定的滚动之后使侧面 div 跟随

java - 将布局渲染的输出设置为变量(条纹)
我正在尝试重用在 jsp 中设置并在 Stripes 布局渲染中使用的变量。主页:/index.jsp 布局渲染页面:/jsp/widgets/signin/oAuthUrl.jsp 我的/jsp/
带有边框图像的 CSS 条纹
我已经测试了几个小时，但我似乎无法让边框图像做我想做的事。我正在尝试向带有水平条纹的 div 添加底部边框。即2px灰，2px白，2px灰；即灰色和白色条纹。像这样: 这是我目前所拥有的: .bo
javascript - html5up! meteor 条纹
我正在尝试使用一个不错的响应式网站模板 http://html5up.net/striped并遇到了一些问题。我已经设置了一个非常基本的测试。我 downloaded条纹包，在陨石应用程序中创建了一个
javascript - 条纹 Angular 形式在指令中不起作用
为什么这行不通？ (例如，为什么脚本没有实际运行并创建付款按钮，就像它不在指令中那样。) .directive('stripeForm', ['$log', function($log) { re
html - 条纹 tr 不包括子表
我有一个表(Maintable)，里面有信息。此外，每个 tr 都有一个子表，其中包含可以在需要时折叠的更多信息。现在，我希望对 maintable 中的 tr 进行 strip 化。我尝试使用:
javascript - 尝试对表中的任意行进行 Zebra 条纹
我有一个表，其中包含由类标记的行。这些行应该是斑马条纹。需要注意的是它们并不总是连续的。我尝试过按表和类名进行匹配，但最终结果总是不正确。发生的情况是， strip 化将应用于表级别，然后仅在具有该
html - 条纹 HTML 表格和行跨度
原始表(http://highspeedbroadband.com.my/home-package/comparison-chart-for-home-package/) 我想修改下图中突出显示的原始
html - 条纹 html 表格行之间的间隙
我有以下 html 文件: .table-striped { padding: 0; margin: 0;
html - 侧面标题的 CSS 条纹
这个问题在这里已经有了答案: CSS technique for a horizontal line with words in the middle (34 个答案) 关闭 9 年前。
html - 条纹 table 上的褪色背景颜色
我有一个 bootstrap 条纹表 ( .table-striped > tbody > tr:nth-of-type(odd){background-color: #f9f9f9;} )，我正在使
java - 条纹 MVC 模型数据
我对 Spring MVC 很有经验，正在试用 Stripes 以决定是否在新项目中试用它。在 Spring MVC 中，我将准备模型数据并将其传递给 View ，方法是将其添加到由我的 Contr
ruby-on-rails - rails/条纹 : No such token
我正在尝试使用 Rails 在 Stripe 中创建一次一次性充电。我收到以下错误: Stripe::InvalidRequestError (No such token: tok_18nnwSJ6t
java - 条纹:错误的 Action 类映射。
在 Stripes 中，如果存在错误的操作类映射，Stripes 的默认行为是将控件转发到发出请求的同一个 JSP，并给出完整的错误堆栈。我计划修改此行为，并希望在出现错误时提供更加用户友好的消息。
apache-spark - spark ORC微调(文件大小，条纹)
我的问题分为两部分: 如何使用 spark 设置(微调)高级 ORC 参数？各种帖子显示可能存在问题Spark Small ORC Stripes , How to set ORC stripe s
java - 条纹 - 重定向，使 session 过期
我有一个 Stripes 框架问题。这个重定向页面在注解方法之前？类似于: @Before public void test() { String login=(String)context.
node.js - 开 Jest mock 条纹
我想使用 Jest 测试我的 nodejs 代码。在我的代码中，我使用了条纹。当需要条纹时，你必须使用这一行 const stripe=require('stripe')("apikey"); 为了
css - 具有 2 种颜色的 SVG 条纹
在这个例子中: https://jsfiddle.net/ywb77uhv/ 为什么将 strip 路径颜色更改为白色以外的颜色会破坏渲染？如何能够更改路径颜色？ #stri
Chrome 中的 css 条纹 bg 奇怪之处
我在获取斜条纹背景以在 Chrome 中很好地显示时遇到了问题。 background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.1)
java - 在 Java 中使用 for 循环重复线条/条纹
我想在图像上绘制黑白条纹，在图像顶部水平和垂直地每 20 列切换一次，同时保持在图像边界内。到目前为止，我可以获得一个带有 1 像素宽垂直条纹的黑色正方形。我尝试过通过切换东西来至少在水平线上获得细长
php - 条纹 : Add metadata to subscription on creation
所以我最近一直在尝试学习 Stripe API...我进展缓慢，但在处理这些元数据信息时遇到了一些障碍。我希望实现的是在创建订阅和客户时向订阅添加元数据。这是创建客户和订阅的原始脚本: $cust

首页

博学

6Ren·AI

商城

html - 如何制作响应式条纹