Question

很抱歉，如果这已经得到解答，但我无法在任何地方找到它！

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

像这样：

enter image description here

任何帮助都会很棒。

非常感谢

Answer 1

现在你提供了一张图片，我会改变你对你真正想要的答案。

我使用的技巧是创建绝对定位的: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

Answer 2

Nota bene：
这个问题的原始措辞有些含糊不清，所以这个答案并不是完全正确的无论如何，它仍然广泛适用于许多类似的情况。

SVG可以很容易地证明一般的想法执行的细节取决于您的具体情况，您需要相应地更改它们。

Sample image

See a Jsfiddle example

如果您的情况需要，SVG图像也可以用作背景图像。或者你可以通过绝对定位现有div并对其进行z索引来破解它。

请参阅本指南，了解如何构建如下所示的SVG形状：SVG path element on Jenkov.com
有关SVG填充原则的信息，请参阅此文章：SVG fill on Jenkov.com

示例中使用的HTML：

<div id="your_div">
    <svg id="back" viewBox="0 0 100 10" preserveAspectRatio="none">
        <path d="M 0,0 L 100,0 100,10 0,10 0,0 M 50,8 L 55,6 52,6 52,2 48,2 48,6 45,6 z" style="fill: white; fill-rule: evenodd;"></path>
    </svg>
</div>

示例中使用的CSS：

body {
    background-image: url(http://i.imgur.com/XxGffrU.jpg);
    background-size: cover;
    background-position: center bottom;
    min-height: 1000px;
    margin: 0;
}

#your_div {
    position: fixed;
    top: 30%;
    width: 90%;
    left: 5%;
    height: 100px;
}

#back {
    width: 100%;
    height: 100%;
}

^{免责声明：我没有以任何方式关联链接网页，他们只是有关于这个主题的综合指南。}

Answer 3

您可以使用相对定位的包装并使用左：50％;和margin-left :-（div宽度的一半）在三角形CSS中，你可以在这里看到：

<强> CSS：

.wrapper{
    position:relative;
    width:50px; /* Same width as .black */
}
.black{
    background:black;
    width:50px;
    height:25px;
}
.triangle {
    position:absolute;
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; /* Half of triangle width */
    border-right: 5px solid transparent; /* Half of triangle width */
    border-top: 5px solid black; /* Triangle height */
    border-bottom: 0px solid transparent;
    left:50%;
    margin-left:-5px; /* Half of triangle width */
}

<强> HTML：

<div class="wrapper">
<div class="black"></div>
<div class="triangle"></div>
</div>

Simple demo

Styleful demonstration with text inside div

从div中切出一个三角形，但是它是水平居中的

3 个答案: