Search code examples
htmlcsscss-shapes

Most efficient way to create a diagonal content box?

I came across this neat little content box with this header :

content box with diagonal line

When I realized that it is similar to something I want to do on my website. Upon looking at the source I noticed they used an image rather than just CSS. I realize that I can use an image but this really defeats the efficiency. I was wondering if anyone knew how to do this through just plain CSS?

My attempt to do so ended with me not being able to bend the border. For example, here is what I tried:

<style>
 #container {
border: 1px solid black;
}
#header {
background: red;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
}
#box {
padding: 10px;
}
</style>
<body>
<div id="container">
<span id="header">test</span>
<div id="box">
test
</div>
</div>

Unfortunately, that looks nothing like how they did it. Also, I'm not even sure if it is good to use a span or not. But in this case, I think it is, because more content could be added to the right of the box rather than the div take up all the line (I think). Does anyone know a better way of doing it?

Solution

  • You can use one pseudo element and border to create the lines :

    DEMO

    output :

    box with angled border

    span{
    position:relative;
    display:inline-block;
    overflow:hidden;
    padding:.5em 5em 1.5em .5em;
    border-top:1px solid #ccc;
    border-left:1px solid #ccc;
}
span:before{
    content:'';
    position:absolute; 
    width:100%; height:100%;
    right:1em;bottom:1em;
    border-bottom:1px solid #ccc;
    border-right:1px solid #ccc;
    
    webkit-transform-origin: 100% 0;
    -ms-transform-origin:100% 0;
    transform-origin:100% 0;
        
    webkit-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    transform: skewX(-45deg);
}
    <span>FIND YOUR IMAGE</span><br/>
<span>short</span><br/>
<span>FIND YOUR IMAGE and another longer one</span><br/>
<span>FIND YOUR IMAGE and another longer one<br/>FIND YOUR IMAGE and another longer one</span>