Menu
I came across this neat little content box with this header :
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?
933
asked Jan 31 '26 15:01
You can use one pseudo element and border to create the lines :
DEMO
output :
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>Well I just made this, you use 1 element with a pseudo-element, may require some more tweaking!
#header {
display: inline-block;
border-bottom: solid 1px gray;
padding: 10px;
position: relative;
}
#header:after {
position: absolute;
right:-17px;
top:-7px;
bottom:-8px;
content: "";
display: block;
width: 0px;
border-left:solid 1px gray;
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
transform: rotate(40deg);
}
Check it out.
More headers can be added beside each other by simply adding a left padding:
Check it out.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
