html如何实现在图片上加三角,html – 带背景图片的CSS三角形[复制]

参见英文答案 >

How do CSS triangles work?18个

>

Creating a transparent arrow above image in CSS32个

尊敬的stackoverflowers,

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

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

但我的状态是这样的：

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

这是我需要colarrowrow的小节课：

Ryan Gosling,Mr Landlord

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

谢谢.