How to Cut Out a Triangle Section from a Div Using CSS

Is it possible to cut out a triangle section from a div using CSS?

The illusion of it is possible: http://jsfiddle.net/2hCrw/4/

Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.

::before and ::after pseudo elements are skewed to provide a side of the triangle each.
Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
Elements can still be styled with borders, shadows, etc.
Anything underneath will show through properly.

Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/

_{This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).}

<div id="wrapper">
    <div id="test">test</div>
</div>

#wrapper {
    overflow: hidden;
    height: 116px;
}
#test {
    height: 100px;
    background-color: #ccc;
    position: relative;
}
#test::before {
    content:"";
    position: absolute;
    left: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(-40deg);
    -moz-transform: skew(-40deg);
    -o-transform: skew(-40deg);
    -ms-transform: skew(-40deg);
    transform: skew(-40deg);
}
#test::after {
    content:"";
    position: absolute;
    right: -8px;
    width: 50%;
    height: 16px;
    top: 100px;
    background-color: #ccc;
    -webkit-transform: skew(40deg);
    -moz-transform: skew(40deg);
    -o-transform: skew(40deg);
    -ms-transform: skew(40deg);
    transform: skew(40deg);
}

As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).

Cut out shape (triangle) from div and show background behind

You could seperate your triangle from the rectangle and go with something like this:

<div id="rectangle"><div id="mask"></div></div>

#rectangle{width:300px; height:120px; position:relative; margin-top:100px; background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

#rectangle:after{content:" "; position:absolute; width:0px; height:0px; top:0; left:100px;border:1px solid white; border-color:transparent white transparent white; border-width:0px 50px 50px 50px;}

#mask{position:absolute; left:0; width:100px; height:50px; background:white;}
#mask:after{position:absolute; content:" "; left:200px; width:100px; background:white; height:50px; }

Fiddle here.

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

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

Triangles at the corners of a DIV

it can be done with pseudo element like this!

*{

  margin:0;

  padding:0;

}

.box{

  background-color:blue;

  width:400px;

  height:200px;

  position:absolute;

  top:50%;

  left:50%;

  transform:translate(-50%,-50%)

}

.box:before, .box:after{

        content:"";

        position:absolute;

      width: 0;

      height: 0;

      border-left: 30px solid transparent;

      border-right: 30px solid transparent;

      border-bottom: 30px solid white;

    }

 .box:before{

   transform:rotate(-135deg);

     left:-20px;

   bottom:-12.5px;

} .box:after{

   transform:rotate(45deg);

     right:-20px;

   top:-12.5px;

}

<div class="box"></div>

Cutting a triangle out of square

How's this (comments in code):

/* make arrow as after pseudo element*/

.square-cut:after {

  content: '';

  display: block;

  line-height: 0%;

  font-size: 0px;

  background: purple;

  border-top: 20px solid purple;

  border-bottom: 20px solid purple;

  border-left: 40px solid white;

}

.square-cut {

  box-sizing: border-box;

  width: 50px; /* as arrow is 40px x 40px, this gives 10px under the tip*/

  height: 50px;

  padding: 5px 0; /* 5px on either side offat side of the arrow */

  background: purple;

  font-size: 0px;

}

<div class="square-cut"></div>

Create a div with triangle cut on the left side middle

.sample{

  height: 200px;

  width: 200px;

  background: red;

  position: relative;

}

.sample::after{

  width: 0;

height: 0;

border-style: solid;

border-width: 25px 0 25px 50px;

border-color: transparent transparent transparent #FFF;

display: block;

  content:"";

  position: absolute;

  top: 10px;

}

<div class="sample"> </div>

How to make a triangle shape in the bottom of the div

I'd go with clip-path to achieve something like this.

.clipped {

  clip-path: polygon(100% 0%, 100% 70%, 50% 90%, 50% 90%, 0 70%, 0 0);

}

img {

  max-width: 100%;

  width: 100%;

}

<div class="clipped">

  <img src="https://loremflickr.com/1280/720">

</div>

How to style the div to triangle using CSS?

Not sure if I understand the question, but if u need to create that little triangle there you should be using borders.

You can find more on that here

http://css-tricks.com/examples/ShapesOfCSS/

your div should have the normal proprieties of (background color, paddings, etc. and a position relative) and then define:

div:after{
content:"";
position:absolute;
left: -100px /* the width of your triangle */
top:0;
height: 0;
 border-top: 50px solid transparent; /* half the height of your div */
border-left: 100px solid red; /* width of the triangle  + the color of your background*/
border-bottom: 50px solid transparent; /* half the height of your div */
width: 0; 
}

hope i didn't forget anything