17

Is it possible to cut a triangle from a <div> like in the picture below?

The background is actually not just colour, but in my case is a blurred picture, so I can’t simply cover the green <div> with a brown triangle image. Is there some other CSS way to achieve this effect? Thanks.

example of div cut

9
  • Is z-index an option in your particular case?
    – luiscubal
    Oct 6, 2013 at 21:42
  • Create a triangle (css3shapes.com), position it absolute, z-index higher that background, win.
    – Joren
    Oct 6, 2013 at 21:43
  • 2
    @Joren: nope. He’s trying to create a triangular section of the <div> where the background behind the <div> shows through, if you see what I mean. Oct 6, 2013 at 21:45
  • @Paul D. Waite if so, then shape it and set background for it, like it's in the div
    – el Dude
    Oct 6, 2013 at 21:47
  • @EL: when you say “shapeit”, what do you mean? Oct 6, 2013 at 21:47

4 Answers 4

21

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).

1
  • 1
    Awesome solution! Way to think outside the box on this one. If only it were possible to skew just one side of a div.
    – Hawkee
    Feb 23, 2016 at 22:42
6

You can do something like this with CSS masks (examples):

I used clip-path: polygon(…) property but only my Chrome seems to support it; you could instead create polygon images and reference them with mask-image for broader support.

1

It isn't possible to cut from divs in css, but it is possible to use an image overlaying the div to make it look like it has been cut.

.triangle{
    background-image: url('cut.png');
    width: 24px; height: 24px;
    z-index: 1;
    position: absolute; top: 32px; left: 15px;
}
2
  • obviously it is possible Oct 6, 2013 at 21:54
  • I interpreted the question differently. sorry guys. Oct 6, 2013 at 22:01
1

It looks like there’s a bit of a drop shadow on your <div> as well, which I’m guessing the triangle should respect.

CSS doesn’t currently provide a way to achieve this directly. One approach would be to create an image of the green bottom area of the <div> with the triangle cut-out in it (using e.g. Photoshop), set it as the background of a <div> inside your original <div>, and position it outside of your original <div>.

Here’s a JS Fiddle example that hopefully explains the idea:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.