我需要一个透明的三角形切出一个白色div(形成一个向下的箭头),我知道它可能是css形状来做它,但我难倒的是如何创建两个100％宽度的白色块任何一边…

像这样：

任何帮助都会很棒.

非常感谢

我使用的技巧是创建：before和：after绝对定位的元素,一个左边和一个右边.每个都有边框来创建形状.关键是box-sizing trick这意味着边框在宽度内,而不是添加到边框上,允许我们为：before和：after伪元素定义50％的宽度.

请注意,我在此演示中用作背景的图像是矩形的,图像中没有三角形！

HMTL

  I'm a box.

CSS

/* apply a natural box layout model to all elements */*, *:before, *:after {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}.box {  background: transparent url('http://i.imgur.com/ipGvBz0.png') no-repeat;  padding: 20px;  min-height: 200px; /* Just to show the image */  margin: 10px;  position: relative;}.box:before,.box:after {  content: '';  display: block;  position: absolute;  bottom: 0;  width: 50%;  border-bottom: 20px solid white;  }.box:before {  left: 0;  border-right: 20px solid transparent;}.box:after {  right: 0;  border-left: 20px solid transparent;}

DEMO