Cut out an area out of a div

Question

I would like to cut out an triangle (or any shape) out of a div, to have a transparent area. I'm trying to create an effect as used for instance here, where arrow-like triangles appear as they were cut out of the object.

Thank you very much in advance!

The website does not give a good indication of what you want. Be more clear. And maybe add some screenshots of what you want — Nicky Smits, Mar 07 '14 at 14:54
The effect you're trying to copy is using an [image with a transparent "cutout" in the middle](http://www.dsorig.com/images/border.png) — kei, Mar 07 '14 at 14:54
The site uses this image: http://www.dsorig.com/images/arrow-down.png — Mohammad Areeb Siddiqui, Mar 07 '14 at 15:00

score 0 · Answer 1 · answered Mar 07 '14 at 15:51

I am adding a jsfiddle link which may help you with the answer.

CSS

body { background: yellow; }

.bar {
    position: relative;
    width: 90%;
    height: 30px;
    margin: 0 auto;

}

.bar > a {
    position: absolute;
    top: 0px;
    left:  60%;
    width: 20%;
    text-align: center;
    font-size: 30px;
    color: yellow;
    padding-top: 30px;
}

.bar > a:before, .bar > a:after {
    content:'';
    position: absolute;
    z-index: -1;
    top: 0;
    width: 0;
    height: 30px;
    border-top: 30px solid transparent;
}

.bar > a:before {
    border-left: 20px solid red;
    left: 50%;
}
.bar > a:after {
    border-right: 20px solid blue;
    right: 50%;
}

.bar:before, .bar:after {
    content:'';
    position: absolute;
    top: 0;
    height: 0;
    border-top: 30px solid white;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}

.bar:before {
    left: 0;
    width: 70%;
    border-right: 30px solid transparent;
}

.bar:after {
    right:0;
    width: 30%;
    border-left: 30px solid transparent;
}

http://jsfiddle.net/JaMH9/219

Cut out an area out of a div

1 Answers1