Cut out triangle with background image

Hi all

I have a demo here to illustrate.

http://www.ttmt.org.uk/layout-test/

Simple question, is it possible do this triangle cut out showing the image in the background as in the yellow section here.

In the exmaple I tried to do it with css. The red triangle is css that I have absolutely positioned.

I have done the yellow cut out triangle using a transparent png but I’d like to do it with css.

It needs to responsive as well and ideally work in ie8

Got it working with transform: skew

Glad you got it working. It looks good:)

I did a similar thing a while ago that allowed subsequent images to be used without rubbing anything out.

So many choices :slight_smile:

Just for fun, I played with the idea presented by ttmt and came up with this example. It uses no skews (therefore, no vendor prefixed code required), only one absolutely positioned element and one negative margin-top. IE9+


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="content-language" content="en-us">
<!--
The RED top is an ordinary rectangle.
The RED down-arrow is in the same container with the car image.
The YELLOW bottom is pulled up from the Yellow rectangle.  The sloped sides are the edges of trapezoids (UK: trapezium).
Image is fluid up to 960px wide here (could be more).
Sorry, the "arrows" do not scale. :)
-->
    <title>Wedges 1c</title>
    <style type="text/css">

*,*:before,*:after {
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
body {
    background-color:#ddd;
}
.outer {
    max-width:960px;
    margin:0 auto;
}
.paneltop {
    height:68px;
    background-color:#f00;
}
.car {
    width:100%;
    height:auto;
    position:relative;
}
.car:after {
    content:"";
    display:block;
    width:0;
    border-top:48px solid #f00;  /* downward pointing red arrow */
    border-right:48px dotted transparent;
    border-left:48px dotted transparent;
    position:absolute;
    top:0;
    left:0;
    right:0;
    margin:0 auto;
}
.car img {
    display:block;
    width:100%;
    height:auto;
}
.panelbottom {
    height:28px;
    background-color:#ff0;
}
.panelbottom:before,
.panelbottom:after {
    content:"";
    width:50%;
    border-bottom:48px solid #ff0;  /* downward pointing transparent wedge */
    margin-top:-48px;
    position:relative;
}
.panelbottom:before {
    border-right:48px dotted transparent;
    float:left;
}
.panelbottom:after {
    border-left:48px dotted transparent;
    float:right;
}

    </style>
</head>
<body>

<div class="outer">
    <div class="paneltop"></div>
    <div class="car"><img src="http://placehold.it/960x480/aabbcc" alt="concept car" width="960" height="480"></div>
    <div class="panelbottom"></div>
</div>

</body>
</html>


(You can replace the placehold.it image with this)