与背景图像的CSS三角形

这个问题在这里已经有了答案：

CSS三角形如何工作？ 18个答案

在CSS3中创建一个透明箭头上方的图像2答案

---

如果你不关心跨浏览器的兼容性，你可以使用一个伪元素，你旋转45度，并附上样式。 你唯一需要额外的就是背景，旋转（后退）45deg附加到伪元素：

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); 
}

下面是一个简短的小提琴来说明（没有背景）：
小提琴

为了解决其他情况，但90度的箭头，你需要扭曲rect另外。 我真的不知道背景图像会发生什么......

---

将图片作为div的背景，并将边距的负值放到条上。 例子（虽然估计，我绝不会声称这个工作）将是margin-left：-20px; margin-top：-20px; 并在线后。

或者去@ Py的答案，你可以使用这个CSS的箭头，并做相同的负边界，使其排队。

#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; margin-left: -20px; margin-top: -20px; } 

---

去http://apps.eky.hk/css-triangle-generator/并生成它：D

要么

#triangle {
   width: 0; 
   height: 0; 
   border-bottom: 120px solid green; 
   border-left: 60px solid transparent; 
   border-right: 60px solid transparent; 
}

链接地址: http://www.djcxy.com/p/89475.html

上一篇: CSS triangle with background image

下一篇: Pure CSS star shape