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

发布时间：2020-12-14 21:16:40 所属栏目：资源来源：网络整理

导读：参见英文答案 How do CSS triangles work?18个 Creating a transparent arrow above image in CSS32个尊敬的stackoverflowers, 如何使用背景图案创建三角形元素？例如,我需要像这样的div：但我的状态是这样的：所有带有三角形元素的例子都使用了边框,这

参见英文答案 > How do CSS triangles work?18个
> 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度箭头之外的其他情况,你需要倾斜矩形.我真的不知道背景图像会发生什么……

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!