如何使背景透明并在div的左右部分创建三角形？答案

【问题标题】：How to make the background transparent and create a triangle in the left and right part of a div?如何使背景透明并在div的左右部分创建三角形？
【发布时间】：2013-04-12 13:08:39
【问题描述】：

我想要实现的位于这里：http://www.ppp-templates.de/tilability/ ..你看到滑块附近的左右三角形，箭头应该在哪里......

现在我在此处设置了该 div，其背景为白色 http://teothemes.com/wp/。在那个网站上使用了背景图片，但我想通过 CSS 来实现

这里有一些相关的东西，对于页脚三角形：Make a CSS triangle with transparent background on a div with white bg image?

我尝试做同样的事情，但没有成功..

非常感谢任何帮助。

【问题讨论】：

标签： html css

【解决方案1】：

您可以做的第一件事是创建两个背景与网站背景相同的正方形，然后使用带有供应商前缀的transform: rotate(45deg) 旋转它们45deg。然后只需将内容 div 的 overflow 设置为 hidden。

我刚刚创建的类似这样的东西：http://cssdeck.com/labs/hggee4eg

【讨论】：

【解决方案2】：

在这里解释这个过程被证明是相当困难的，所以我创建了一个小提琴，它完成了实现这一目标所需的每个步骤，每个步骤都有一个小图例。

这是小提琴 - http://jsfiddle.net/NXmge/3/

编辑 - 我误解了这个问题。这是解决实际问题的方法：http://jsfiddle.net/joplomacedo/UJyAY/

前一个小提琴仍然有用，因为它有助于理解我在第二个小提琴上做了什么。我也会尽快更新我的答案，因为我可以直接包含我所做的一般解释。

【讨论】：

您是否也将您的答案包含在您的答案中？这样，当 JS Fiddle 下一次倒下时，您的答案仍然有用。外部站点很适合演示，但答案本身应该是独立的，以防止链接失效。
是的，我通常这样做。很着急。给我 5 分钟，我会更新我的答案。
感谢您的回复，但我认为您误解了我 :( 页脚很好，我希望为滑块实现相同的结果，但这次是在左侧和右侧部分主页
很遗憾，我现在没时间了。今天晚些时候，如果还没有回答，我会回到这个。很抱歉误读了这个问题。
我已经根据您的实际问题的解决方案更新了我的答案。

【解决方案3】：

根据您希望实现的跨浏览器兼容性，有几个不同的 CSS3 类型选项可让您将元素旋转 45 度。

但是，您链接到的示例仅使用了一个大背景图像，其中图形已经就位：除了将其设置为容器背景之外，CSS 根本无法实现。

【讨论】：