Is it possible to have div/element with an angled edge

Hi all

I have a page here to illustrate: http://www.ttmt.org.uk/div/

This is just a background image in a div.

Is it possible to do this with two separate divs that have angled edges.

The red and green blocks would be two separate div/elements. This is possible to move the left bottom corner of the red block down and the right top corner of the green block up?

Hi,

At present css only uses rectangular blocks (although there are shapes in the pipeline). You can of course create [URL=“http://css-tricks.com/examples/ShapesOfCSS/”]angled effects but you can’t have text automatically flow within them.

You may need to explain whether your content is to follow the shape or whether you are just looking for angled effects?

If you want to follow a shape with the content then the best you can do at present is to use the sandbag technique.

As Paul said, it is not yet possible, you would essentially have to fake it ( again that means no text wrap, and you may only have solid or gradient bgs, etc).

Here is one technique I use, for browsers that support linear-gradients , multiple bgs, and border-size:

div {
    background: pink; /* fallback */
    background:
        -moz-linear-gradient(45deg,  transparent 10px, pink 10px),
        -moz-linear-gradient(135deg, transparent 10px, pink 10px),
        -moz-linear-gradient(225deg, transparent 10px, pink 10px),
        -moz-linear-gradient(315deg, transparent 10px, pink 10px);
    background:
        -o-linear-gradient(45deg,  transparent 10px, pink 10px),
        -o-linear-gradient(135deg, transparent 10px, pink 10px),
        -o-linear-gradient(225deg, transparent 10px, pink 10px),
        -o-linear-gradient(315deg, transparent 10px, pink 10px);
    background:
        -webkit-linear-gradient(45deg,  transparent 10px, pink 10px),
        -webkit-linear-gradient(135deg, transparent 10px, pink 10px),
        -webkit-linear-gradient(225deg, transparent 10px, pink 10px),
        -webkit-linear-gradient(315deg, transparent 10px, pink 10px);
    background-position: bottom left, bottom right, top right, top left;
    -moz-background-size: 50% 50%;
    -webkit-background-size: 50% 50%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
        
}

Alternatively, you could use absolute positioned :before and :after pseudo elements:

div {
  position:relative ;
  background: pink;
  padding: 10px 20px;
        
}	
 
div:before, div:after{ content:''; position: absolute; top:0; bottom:0; width: 0; border: 10px solid #fff}
div:before { left:0; border-right-color:transparent}
div:after {  right:0; border-left-color:transparent}

 

 
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

Additional limitations to technique: you can’t use %s and you have to be careful of fix width ( tho that’s not really a biggie)

hope that helps