- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想用 CSS 创建一个奇形怪状的三 Angular 形。我的第一个想法是将透明边框与 transform: rotate
一起使用,它起作用了(见左三 Angular )。现在我想使用渐变边框图像图案作为同一三 Angular 形的背景,但我无法使其工作。我尝试了很多方法,例如更改 border-width
、使用包装器和 overflow:hidden
等等,但没有任何效果。在这里,我发布了我的一个尝试(见右图),因为你看到图案占据了所有空间,而不是遵循三 Angular 形。有什么想法吗?
#top-left {
position:absolute;
left:78px;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 80px solid black;
border-bottom: 50px solid transparent;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
left:300px;
width: 0;
height: 0;
border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}
<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>
编辑: Andrey Fedorov 的回答很好,但是当背景不是纯色时会出现问题,例如:
body{
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#wrapper {
position: relative;
}
#top-left {
position:absolute;
left:0px;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-right: 80px solid transparent;
border-bottom: 50px solid #fff;
-webkit-transform: rotate(-20deg);
}
#top-right {
position:absolute;
z-index: -10;
left:0;
width: 0;
height: 0;
border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
}
<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>
最佳答案
你仍然可以使用 linear-gradient
和 no-repeat
和 background-size
来绘制每一 block :
单个标签的示例:
/* testing gradients */
p , div#wrapper {
width:80px;
float:left;
margin:1em;
height:150px;
/* see me then remove this shadow */
box-shadow:0 0 0 2px;
}
p {
background:
linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ;
background-size:
100% 15px;
transform: rotate(-20deg);
}
p + p{
background:
linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ,
linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat;
background-size:
100% 15px,
100% 65%;
}
p + p + p {
background:
linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ,
linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat,
linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom;
background-size:
100% 15px,
100% 65%,
100% 8px;
}
p+ p + p + p {
background:
linear-gradient(130deg, transparent 49.75%, pink 50.5%) 0 42px no-repeat ,
linear-gradient(130deg,transparent 62px, purple 63px) top no-repeat,
linear-gradient(33deg , transparent 42px, pink 43px) no-repeat bottom,
linear-gradient(33deg, transparent 42px, purple 43px) bottom no-repeat;
background-size:
100% 15px,
100% 65%,
100% 8px,
100% 35.5%;
}
p:last-of-type{
box-shadow:0 0
}
/* your original CSS/issue */
body{
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
#wrapper {
position: relative;
}
#top-left {
position:absolute;
left:0px;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-right: 80px solid transparent;
border-bottom: 50px solid #fff;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
#top-right {
position:absolute;
z-index: -10;
left:0;
width: 0;
height: 0;
border-image: repeating-linear-gradient( 0deg, pink, pink 1%, purple 1%, purple 8%) 10;
border-image-width: 100px 80px 50px 0px;
border-width: 100px 80px 50px 0px;
border-style: solid;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
<!-- your issue -->
<div id="wrapper">
<div id="top-left"></div>
<div id="top-right"></div>
</div>
<!-- p for testing purpose -->
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
inbricated element + gradient & transform 也可以这样做:
body{
background-color: #6d695c;
background-image:
repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
background-size: 70px 120px;
}
div.inbricate {
margin:1em;
height:150px;
width:80px;
position:relative;
overflow:hidden;
transform:rotate(-20deg);
box-shadow: 0 0 ;
}
.inbricate div {
transform:rotate(31deg) scale(1.2, 0.9) skew(-5deg);
transform-origin: 100% 102%;
height:100%;
background:linear-gradient(-40deg, pink 8%, purple 8%, purple 65%, pink 65%, pink 75%, purple 75% )
}
<div class=inbricate>
<div>
</div>
</div>
关于css - 三 Angular 形边界图像渐变图案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38632275/
我正在使用自定义的 uitableviewcell,并尝试重新创建一张活页纸作为背景。由于每个单元格都会根据文本量而增长,因此我需要为每个单元格的背景使用一个图案。但我对这些黑线有疑问,这让我发疯!
我已经解决这个问题 2 个小时了,似乎无法弄清楚如何按模式计数。 图案: 1-1-1 1-1-2 1-2-1 1-2-2 2-1-1 2-1-2 2-2-1 2-2-2 等等…… 最佳答案 我认为最简
我想尝试创建一个学习象棋应用程序作为学校项目。我的第一个计划是简单地让这个人工智能与自己进行较量,但要真正展示它是否成功,它需要能够展示它的进展情况。为了做到这一点,我希望它能够在 chess.com
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 这个问题似乎偏离主题,因为它缺乏足够的信息来诊断问题。 更详细地描述您的问题或 include a mini
以下函数返回什么? (就意义而言) int f(int n){ if(n == 0) return 0; else return n % 2 + f(n / 2) } 尝试运行代码,但
我有一个专栏A3:A71我希望填充值 =COUNTIF(B3:B71,B3) 第二个参数随每个单元格递增。 显然我不想每次都复制这个函数,所以我希望填充句柄能帮助我。然而,尽管它正确地增加了 COUN
我需要重复 svg 在水平方向 . 我的意思是,svg 比图案大,所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心,这正是现在正在发生的事情。我只需要让它在两边都重复。 现在,我只
我需要重复 svg 在水平方向 . 我的意思是,svg 比图案大,所以我需要它在剩下的任何空间上水平重复。 我希望主要图案出现在中心,这正是现在正在发生的事情。我只需要让它在两边都重复。 现在,我只
请帮我完成作业。我想使用循环 C 语言生成这样的模式 X X X XXX XXXXX XXX X X X XXXXX X X X X X X XXXXX X XX X X X X X
c# 3.0 为我们提供了带有编译器生成的支持字段的 getter 和 setter - 这真的很棒,但很多时候您仍然需要使用支持字段。 在一个完美的世界(意见)中,你可以做类似的事情 class M
我正在创建一个 wordpress 主题,我正在尝试创建一个导航栏,其中每个 li 都有不同的背景颜色(例如,红色,然后是绿色,然后是蓝色)。然后在使用前三种颜色后,它会再次重复使用。 例如:
是否可以将 .svg 图案作为背景图像,svg 图案应调整为窗口宽度和高度。 最佳答案 这是可能的,但浏览器支持有限。 Webkit 往往具有最好的 SVG 支持,而 IE 最差。您可以使用 CSS
如何打印反Z图案? 普通 Z 模式的代码: int main() { int n; printf("Enter number of rows: "); scanf("%d", &n); for (in
我的图片中有重复的图案。我想根据相似的模式找到相似的图像。 图案由十字形、三角形、正方形组成,它们组合在一起形成由这些“原始形状”构成的更复杂的结构。例如,想象一个由三角形或六边形等组成的十字架。 这
是否可以在 SVG 填充中模拟以下 CSS? background-image: url(/* URL */); background-position: 50%; background-size:
这个问题在这里已经有了答案: How to make SVG image pattern fill move with object? (4 个答案) 关闭 1 年前。 我创建了这里看到的 svg
问题:存在关联键的表列表。有必要为每个表实现 CRUD + 一些关于表细节的功能(分页等)。麻烦:在每个表的每个功能实现中重复了大约 50% 的代码。问题:关于语言细节、优化/重构/使用类似代码模式的
尝试绘制在 x 轴上重复的背景。然而,图像放错了位置,当我调整窗口大小时,位于图案中的 View 将开始“移动”。 我做错了什么?目前正在做以下工作: [[NSColor colorWithPatte
Javascript 问题。 关于模式或表达,可能是重复的问题。 您可以使用下面的三个来获得一个对象。结果对象的工作原理相同。 当您使用繁重的 JavaScript Web 应用程序时,哪种模式最好?
是否可以使用 CSS 创建以下效果。我在 HTML 中只有一个 H2 元素,我对页面的 HTML 没有任何控制。我只能更改 CSS。 我用 :before 和 :after 尝试过,但到目前为止没有成
我是一名优秀的程序员,十分优秀!