Cutting a triangle out of div, BUT have it horizontally centered

Question

Sorry if this has been answered but I can't find it anywhere!!

I need a transparent triangle cut out of a white div (to form a down arrow), I get that it could be css shapes to do it, but the thing I'm stumped on is how to create two 100% width white blocks on either side...

Like this:

Any help would be great.

Many thanks

Answer 1

Now you've provided an image, I'll change my answer to what you actually want.

The trick I'd use is to create :before and :after elements that are absolutely positioned, one left and one right. Each one has borders to create the shapes. The key to this is the box-sizing trick which means that the borders are inside the width, rather than added onto, allowing us to define a 50% width for the :before and :after pseudo elements.

Note that the image I'm using as the background in this demo is rectangular, it doesn't have the triangle in the image!

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:
The original wording of the question was somewhat ambiguous so this answer isn't exactly spot-on.
Regardless, it's still widely applicable for many similar situations.

---

The general idea can easily be demonstrated with SVG.
The details of the execution are up to your specific situation and you will need to change them accordingly.

See a Jsfiddle example

SVG images can also be used as background-images if your situation requires that. Alternatively you can hack it by positioning the existing div absolutely and z-indexing it.

See this guide on how to build SVG shapes like the one below: SVG path element on Jenkov.com
See this article for information on SVG fill principles: SVG fill on Jenkov.com

---

HTML used in the sample:

<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 used in the example:

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

---

^{Disclaimer: I'm not affilated with the linked webpage in any way, they merely have comprehensive guides on the subject.}

Answer 3

You can use a relatively positioned wrapper and use left:50%; and margin-left:-(half of div width here) in the triangle CSS, as you can see here:

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