html复制背景去除,html – 带背景图片的CSS三角形[复制]

参见英文答案 >

How do CSS triangles work?                                    18个

>

Creating a transparent arrow above image in CSS3                                    2个

尊敬的stackoverflowers,

如何使用背景图案创建三角形元素？

例如,我需要像这样的div：

但我的状态是这样的：

所有带有三角形元素的例子都使用了边框,这些边框不能使用img ….

这是我需要colarrowrow的小节课：

Ryan Gosling, Mr Landlord

.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？ …

谢谢.