参见英文答案 >
How do CSS triangles work?18个
> Creating a transparent arrow above image in CSS32个
尊敬的stackoverflowers,
> Creating a transparent arrow above image in CSS32个
尊敬的stackoverflowers,
如何使用背景图案创建三角形元素？
例如,我需要像这样的div：
但我的状态是这样的：
所有带有三角形元素的例子都使用了边框,这些边框不能使用img ….
这是我需要colarrowrow的小节课：
<div class="subsection"><span>Ryan Gosling,Mr Landlord</span></div>
.subsection {
.Box-shadow (0,-1px,1px,rgba(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？ …
谢谢.
解决方法
如果您不关心跨浏览器兼容性,则可以使用旋转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度箭头之外的其他情况,你需要倾斜矩形.我真的不知道背景图像会发生什么……
