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

概述参见英文答案 > How do CSS triangles work?                                    18个 >             Creating a transparent arrow above image in CSS3                                    2个 尊敬的stackoverflowers, 如何使 参见英文答案 > How do CSS triangles work?18个
> Creating a transparent arrow above image in CSS32个
尊敬的stackoverflowers,

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

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

但我的状态是这样的：

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

这是我需要colarrowrow的小节课：

<div ><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度箭头之外的其他情况,你需要倾斜矩形.我真的不知道背景图像会发生什么……

总结

以上是内存溢出为你收集整理的html – 带背景图片的CSS三角形[复制]全部内容，希望文章能够帮你解决html – 带背景图片的CSS三角形[复制]所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。