css – 从div中切出一个三角形,但是它水平居中

参见英文答案 > Transparent arrow/triangle indented                                    3个
对不起,如果这已经回答,但我无法在任何地方找到它！

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

像这样：

任何帮助都会很棒.

非常感谢

现在你已经提供了一个图像,我会改变你对你真正想要的答案.

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

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

HMTL

<div class="box">
  I'm a box.
</div>

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