具有 2 个叠加层的 CSS Skew-6ren

具有 2 个叠加层的 CSS Skew

转载作者：行者123 更新时间：2023-11-28 09:23:18

27

4

我正在尝试复制下图的样式:

这就是我所在的地方:

.asymmetric {
	position: relative;
	background-color: #7CCBF2;
}

.asymmetric::before {
	position: absolute;
	content: "";
	width: 100%;
	height: 115%;
	top: -30px;
	left: 0;
	background-color: red;
	transform: skewY(-3deg);
	z-index: -10;
}

.asymmetric::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 115%;
	top: -10px;
	left: 0;
	background-color: yellow;
	transform: skewY(3deg);
	z-index: -10;
}

body {
	margin: 0 auto;
	background-color: #EEEEEE;
	font-family: sans-serif;
}

section {
	padding: 50px 0;
}

.blank-space {
	height: 100px;
}

h2 {
	margin: 0;
	padding-bottom: 70px;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 15px;
}

p {
	width: 70%;
	margin: 0 auto;
	line-height: 2;
	font-size: 18px;
}

<body>
	<section class="blank-space"></section>
	<section class="asymmetric">
		<h2>Heading</h2>
		<p>Lorem ipsum dolor sit amet, magna tellus, ultricies etphasellus tincidunt elit nec. Ornare sollicitudin sapien non, dignissim metus wisi pharetra sollicitudin, sem integer. Nibh sem et amet, ultrices ac interdum, nec enim lorem elit commodo dolor, aliquam ipsum eget ornare nullam, iaculis porttitor. Quisque sint, lobortis rutrum est nonummy, potenti quam quam molestie pede porta. Sem ante dis dui wisi suscipit, eu vitae odio integer, congue velit lectus aliquet luctus bibendum, et facilisis, laoreet ad</p>
	</section>
	<section class="blank-space"></section>
</body>

我尝试过使用 ::before 和 ::after，结果甚至都不相似。

最佳答案

没有所有这些标记和更少代码的线性渐变解决方案怎么样:

section {
  padding:50px;
  background-image:  
  /*top layer*/
  linear-gradient(to top right,transparent 50%,rgba(0,255,0,0.5) 51%),
  linear-gradient(to bottom left,transparent 50%,rgba(0,255,0,0.5) 51%),
  linear-gradient(rgba(0,255,0,0.5),rgba(0,255,0,0.5)),
  /*Bottom layer*/
  linear-gradient(to top left,transparent 50%,red 51%),
  linear-gradient(to bottom right,transparent 50%,red 51%),
  linear-gradient(red,red);
  
  background-position:bottom,top,center;
  background-size:100% 40px,100% 40px, 100% calc(100% - 80px);
  background-repeat:no-repeat;
}

<section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus est nibh, quis vulputate mi vehicula quis. Donec luctus, turpis molestie pretium ornare, ipsum tellus consequat nibh, vitae consectetur odio mauris sit amet orci. Suspendisse libero metus, mattis vel malesuada vel, ornare eget orci. Sed rhoncus metus mauris, et egestas arcu imperdiet at. Aenean orci orci, fringilla vel porttitor id, suscipit eget nunc. Quisque ac sem ultrices, dignissim massa eu, auctor diam. Etiam tempus tempus velit a scelerisque. Nam dolor lacus, venenatis a leo quis, ornare aliquet urna. Curabitur convallis maximus tempus. Donec ac enim quis ante tincidunt dapibus. Suspendisse et risus arcu.
</section>

如果你想让它不对称地调整一些值:

section {
  padding:50px;
  background-image:  
  /*top layer*/
  linear-gradient(to top right,transparent 50%,rgba(0,255,0,0.5) 51%),
  linear-gradient(to bottom left,transparent 50%,rgba(0,255,0,0.5) 51%),
  linear-gradient(rgba(0,255,0,0.5),rgba(0,255,0,0.5)),
  /*Bottom layer*/
  linear-gradient(to top left,transparent 50%,red 51%),
  linear-gradient(to bottom right,transparent 50%,red 51%),
  linear-gradient(red,red);
  
  background-position:bottom,top,center;
  /*Updated this*/
  background-size:100% 30px,100% 30px, 100% calc(100% - 60px),
                  100% 50px,100% 50px, 100% calc(100% - 100px);
  background-repeat:no-repeat;
}

<section>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam rhoncus est nibh, quis vulputate mi vehicula quis. Donec luctus, turpis molestie pretium ornare, ipsum tellus consequat nibh, vitae consectetur odio mauris sit amet orci. Suspendisse libero metus, mattis vel malesuada vel, ornare eget orci. Sed rhoncus metus mauris, et egestas arcu imperdiet at. Aenean orci orci, fringilla vel porttitor id, suscipit eget nunc. Quisque ac sem ultrices, dignissim massa eu, auctor diam. Etiam tempus tempus velit a scelerisque. Nam dolor lacus, venenatis a leo quis, ornare aliquet urna. Curabitur convallis maximus tempus. Donec ac enim quis ante tincidunt dapibus. Suspendisse et risus arcu.
</section>

关于具有 2 个叠加层的 CSS Skew，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49742265/

27

4

0

文章推荐： ios - ArcGis Runtime 100 保存图层以供离线访问

文章推荐： ios - 转场和转场条件不起作用

文章推荐： javascript - 所有者下拉列表不过滤故事纸板

文章推荐： css - 如何使元素填充剩余的视口(viewport)高度？

what is the meaning of skew in write skew or read skew(WRITE Skew或Read Skew中的Skew是什么意思)
我在学习DDIA中的数据库事务，这本书中有两个概念，一个是工作负载不平衡的热点，另一个是时间异常，我不明白时间异常的意思，为什么叫时间异常。。我想知道在这种情况下如何解释倾斜的威胁
css - Chrome : Text blurry when skew back : skew(-10deg) -> skew(10deg)
我只是想歪斜 parent ，然后歪斜 child 。示例:HTML Hello 示例:CSS .parent { transform: skew(-10deg); } .c
html - skew() 函数深入
我真的需要了解如何skew(xdeg)函数起作用所有研究似乎都没有解释 x Angular 如何影响其他点并像这样扭曲它，我需要知道它是否有任何数学公式或一种能够预期使用特定度数的结果的方法。附:我
生成文件 : Clock skew detected
这个问题在这里已经有了答案: Compiling C++ on remote Linux machine - "clock skew detected" warning (14 个回答) 10 个月前
ios - 是否可以渲染 tableview 'skewed' ？
我正在为运行 iOS7+ 的设备编写 Swift 2.0 代码。是否可以如下所示以倾斜/对角线/倾斜格式呈现表格 View ？显然，如果答案是肯定的，我需要经过什么过程才能得到结果？最佳答案是
css - 如何使用变换 :skew? 拥有完美的天际线
我想知道是否可以使用 transform:skew 获得完美的边缘(我想附加一个 img 但我不能(1 分)) https://ibb.co/g5qODG (没有阴影的图像示例。它看起来仍然被咬了。)
html - Skew CSS - 将元素保持在右上角和左下角
您好，我正在尝试找到在调整页面大小时将倾斜元素保持在适当位置的最佳方法。我希望能够扩展内容区域(绿色区域)并保持相同的形状，但也希望白色 Angular 的形状也相同。对不起，我在这方面缺乏知识，
html - Css Skew 创建一个相框
我正在尝试使用 CSS 在每一侧倾斜一个 div 以模仿相框 Angular ，但我不知道如何分别倾斜每一端并保留背景图像。最佳答案已更新再添加两个div，这将是一个技巧
CSS Skew 仅容器，而非内容
我无法弄清楚如何使以下布局正常工作。我并不局限于纯 CSS——我知道 JS 将参与使其跨浏览器——但 CSS 解决方案会很棒。这是我想要实现的目标: 我试过下面的代码，先倾斜容器，然后朝相反的方向倾斜
makefile - 如何解决错误: "Clock skew detected"?
这个问题已经有答案了: Compiling C++ on remote Linux machine - "clock skew detected" warning (14 个回答) 已关闭 2 年前。
javascript - CSS Skew - 获取偏移量/上距离
我需要一些帮助。我有矩形(红色)。这个矩形有 transform: skew(0deg, -6deg); 我现在需要的是红色上方区域的高度。看图: 我确信这是简单的数学运算。但我在谷歌上找不到解决方案
css - 添加转换 : skew to container only, 而不是文本
有没有办法转换一个元素而不是该元素内的文本？ body { font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sa
具有 2 个叠加层的 CSS Skew
我正在尝试复制下图的样式: 这就是我所在的地方: .asymmetric { position: relative; background-color: #7CCBF2; } .asymmetric:
html - 如何内联 'skewed' li 之间没有边距
我需要帮助将 4 个内联 li 放入一个 div 中，但是，这些 li 需要“水平倾斜”。这是我需要做的:(对链接感到抱歉，但堆栈不允许我放置图片) https://www.flickr.com/ph
linux - "clock skew detected” 安装时出现警告
我正在远程计算机上工作，在安装软件时，我遇到了“检测到时钟偏差”警告，整个过程都失败了。我使用了“find . -exec touch {}\;”更新文件的时间戳但仍然失败，而且更连线，时间戳仍然领先
python - MetPy Skew-T 基准线和限制
使用 MetPy 制作斜 T 图时，很难看到温度和露点轨迹以及绘制的基准线(混合比、潮湿绝热等)。是否有一种方法(在我看到的文档中没有看到)将它们淡化到背景中(例如 alpha)？同时设置限制似乎有
string - 了解 DC3/Skew 算法的实现以创建后缀数组线性时间
我正在尝试了解 Karkkainen, P. Sanders 对线性时间后缀数组创建算法的实现。算法详情可见here . 我设法理解了整体概念，但未能将其与提供的实现相匹配，因此无法清楚地掌握它。这
sql - “丢失更新”与 'Write skew'
有人能给我解释一下 a 和 a 之间的区别吗数据库事务理论中的“丢失更新”和“写入偏斜”？有人可以给我举个例子吗？最佳答案通俗地说，丢失更新和写入偏差是并发写入事务相互干扰的方式。写入偏差发生
scala - SKEW 连接提示的 Spark Scala 等价物
Spark SQL 有一个可用的倾斜提示(请参阅 here)。是否有适用于 Spark Scala 的等效提示？例子这是事实表倾斜 ProductId 列的 Spark SQL 代码: SELECT
html - CSS - 模糊文本/图像 - 变换 :skew
由于以下原因，我的网站上出现模糊的文本和图像: transform:skew(0.25rad) 这是我的 html: TITLE 这是我的 CSS: .one{ backgroun

首页

博学

6Ren·AI

商城

具有 2 个叠加层的 CSS Skew