Most efficient way to create a diagonal content box?
I came across this neat little content with this header:
When I realized that it is similar to what I want to do on my website. After looking at the source, I noticed that they were using an image, not just CSS. I realize that I can use an image, but this really wins out on efficiency. I was wondering if anyone knows how to do this with simple CSS?
My attempt to do this ended up being unable to bend the border. For example, here's what I've 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, this is not 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 can be added to the right of the window, rather than the div to accept all lines (I think). Does anyone know a better way to do this?
source to share
You can use one pseudo element and border to create strings:
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>
source to share
Well I just did this, you are using 1 element with a pseudo element, some more tweaks may be required!
#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);
}
More headers can be added next to each other by simply adding a left padding:
source to share