带有背景图像的CSS三角形[重复]
Posted
技术标签:
【中文标题】带有背景图像的CSS三角形[重复]【英文标题】:CSS triangle with background image [duplicate] 【发布时间】:2013-07-16 02:06:05 【问题描述】:尊敬的***ers,
如何创建带有背景图案的三角形元素?
例如,我需要这样的 div:
但我的状态是这样的:
所有带有三角形元素的示例都使用边框,其中不能有 img ....
这是我需要coolarrow的小节类:
<div class="subsection"><span>Ryan Gosling, Mr Landlord</span></div>
.subsection
.box-shadow (0, -1px, 1px, 0, rgba(0, 0, 0, 0.3));
background: url('/assets/pattern-lorem.png'); // The inner part of the slider have the pattern
display: block;
clear: both;
float: left;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
display: none;
.subsection
position:relative;
.subsection:before
content:'';
position:absolute;
top:0;
left:0;
height:20px;
width:0;
border-left:20px solid white;
border-bottom:16px solid transparent;
.subsection:after
content:'';
position:absolute;
top:36px;
left:0;
bottom:0;
width:0;
border-left:20px solid white;
border-top:16px solid transparent;
我得到了:
这很好......我怎样才能以所需的形式将箭头放在顶部? ...并覆盖案例 div ? ... 谢谢。
【问题讨论】:
我认为这个问题回答了类似的问题***.com/questions/11379085/… 不,它不是重复的......需要有一个形状但有图像背景的图像......而不是从边框输入的颜色...... 你会考虑使用 SVG 而不是 CSS 吗?可能会更容易。 【参考方案1】:如果您不关心跨浏览器的兼容性,您可以使用旋转 45 度的伪元素并将样式附加到它。你唯一需要的就是背景,旋转(向后)45度以附加到伪元素:
div.coolarrow:before
content: '';
position: absolute;
z-index: -1;
top: -24.7px;
left: 10px;
background-color: #bada55;
width: 50px;
height: 50px;
background: url(url/to/your/45deg/rotated/background.gif);
box-shadow: inset 0 0 10px #000000;
transform: rotate(45deg);
这里有一个简短的说明(没有背景):Fiddle
要解决除 90 度箭头以外的其他情况,您需要额外倾斜矩形。而且我真的不知道背景图片会发生什么......
【讨论】:
谢谢……请看我的更新……我从你那里得到了一些想法……【参考方案2】:将图像作为 div 的背景,并将边距设置为负值,使其覆盖在栏上。示例(尽管估计,但我绝不声称这行得通)将是 margin-left: -20px;边距顶部:-20px;并将其放在行后。
或者使用@Py 的答案,您可以使用此 CSS 作为箭头,并使用相同的负边距使其对齐。
#triangle-up width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px;
【讨论】:
谢谢......请看我的更新...... 要将其置于顶部,请在箭头 div 的 CSS 类中添加margin-top: -10px
(更改 10 以查看适合您的需要)。
没有箭头类了....使用before和after的伪元素...我已经发布了整个css...你可以看看...谢谢
添加 margin-top: -10px 到刚刚增加侧面之后...不是箭头的位置...它仍然在左侧..dosent 指向顶部...跨度>
我作为答案发布的代码将使箭头指向上方。【参考方案3】:
继续http://apps.eky.hk/css-triangle-generator/ 并生成它:D
或
#triangle
width: 0;
height: 0;
border-bottom: 120px solid green;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
【讨论】:
以上是关于带有背景图像的CSS三角形[重复]的主要内容,如果未能解决你的问题,请参考以下文章