Search code examples
csstransformmaskclip

Trying to create a sloppy rectangle without clip path

I'm trying to create a box with the top border skewed, the right border skewed to the left, the left to right and the bottom should stay straight. It need to look like this: Sloppy rectangle

I could accomplish this using a clip-path but I want to have compatibility for more browsers (like older browsers, i.e & opera).

I thought maybe using inline SVG but I think that in SVG the height must be specified and I want that the height of the box will defined by it's content (dynamic).

Solution

  • Here is my attempt to mimic your image.

    JsFiddle

    <!DOCTYPE HTML><html><head><meta charset="utf-8">
<title>Slanted Borders</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
.slanted{
    display:block;
    position:relative;
    margin:50px auto;
    padding:20px 20px 0; /* border space */
    width:600px;
    overflow:hidden;
}
.slanted:before,
.slanted:after,
.slanted-top:before{
    position:absolute;
    top:20px;
    left:0;
    border:solid transparent;
    border-top-color:tan;
    border-width:600px 0 0 20px; /* left border (top as max box height) */
    width:0;
    height:0;
    content:"\a0";
}
.slanted:after{
    right:0;
    left:auto;
    border-width:600px 20px 0 0; /* right border (top as max box height) */
}
.slanted-top:before{
    position:absolute;
    top:0;
    border-color:transparent;
    border-left-color:tan;
    border-width:20px 0 0 640px; /* top border width+padding (right as box length) */
}
.slanted-top{
    padding:10px;
    background:tan; /* background-color same as borders */
}
.slanted p{
    margin:1em;
}
.slanted a{
    display:block;
    margin:1em;
}
.slanted a:hover{
    height:20em;
}
</style>
</head><body>
 
<div class="slanted">
    <div class="slanted-top">
        <p>Slanted Borders</p>
        <a href="#nogo">Hover to expand</a>
    </div>
</div>
 
</body></html>