Diagonal bottom on rectangle? - html

Question

Thank you in advance for your help.
I have spent a good deal of time scouring the web and this forum for a solution to having a diagonal angled bottom to my navigation buttons. Here is an example:
I want to avoid using images if possible. I'm wondering how to create a box like this in the example image for each navigation choice with CSS. This navigation code will make its way into a Wordpress install. I really appreciate the expertise. Thank you again!

Answer 1

So good-news, bad-news...
This can be most-of-the-way done using nothing but CSS.
For sufficiently-new browsers (ie: you don't require IE<=8 to maintain all styles that Chrome 42 has) this can be done without using extra DOM elements.
This can also be done using just CSS ...wait for it...
buuuut the CSS-only version can only make the angle a set width.
It can't make the angle stretch across an arbitrary width, so either the buttons have to be the same length, or the width/height of the angle has to be the same on all buttons (meaning part of the bottom will be flat, on longer buttons).
CSS-only Solution (good enough?)
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
I made the colours obvious for a reason.
For the full experience of the cheat, I'll make the solution a little more obvious, by changing the colour of the left border:
Behind the Scenes Look
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid red;
border-bottom: 15px solid blue;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
As you can see, the triangle that I created using the border-bottom (in blue) and border-left (transparent) is just about perfect.
The width of the border-left determines the width of this effect, and the height of the border-bottom determines the height; it just happens that the left one is invisible.
If that blue were set to the same green as the <nav> itself, then it would look like a notch was missing from the button, rather than having a corner painted over.
If you wanted to make this ES6-8 friendly, you'd just add 1 div per button (after each button or whatever), and size that and use its borders.
Really, you'd need to add a div to contain the div and the button, as well (so the container was relatively positioned, the button took up 100% of its space, and the paint-chip was absolutely positioned inside).
If you don't care about old browsers getting the exact same view, you really don't need to do this to yourself.
That's most of the way solved...
If you can say "My theme's smallest button is 60px, so a 60px triangle is okay", then great. Change the colours and you're done.
If not, there's a little more you can do.
It's not ideal, and it's not as pretty as it could be (still prettier than a lot out there), but if you can use JS to do this, and you can guarantee that all of the buttons are going to be on the page before the code runs, and their widths won't change, you can do something like:
JS + CSS (good enough!)
(function () {
var nav;
var buttons;
var style;
var styleText;
function getElWidth (el) { return el.getBoundingClientRect().width; }
function borderLeftText (width, i) {
return ["nav > button:nth-child(", i + 1, "):after { border-left: ", width, "px solid transparent; }"].join("");
}
function getStyleEntries (els) {
return els.map(getElWidth).map(borderLeftText);
}
try {
nav = document.querySelector("nav");
buttons = [].slice.call(nav.querySelectorAll("button"));
style = document.createElement("style");
styleText = getStyleEntries(buttons).join("\n");
style.textContent = styleText;
document.head.appendChild(style);
}
catch (err) {
// because the same browsers that will blow up won't support the CSS anyway;
// don't fix it, just move on
// good code shouldn't do this, but that's another story
}
}());
nav {
background-color: green;
padding: 20px;
}
nav > button {
background-color: rgb(60, 60, 60);
color: rgb(120, 120, 120);
position: relative;
border-radius: none;
border: none;
padding: 20px;
}
nav > button:after {
content: "";
width: 0;
height: 0;
right: 0;
bottom: 0;
position: absolute;
border-left: 60px solid transparent;
border-bottom: 15px solid green;
}
<nav >
<button >About</button>
<button >Bios</button>
</nav>
Here I'm basically grabbing all buttons that exist at this time, and writing my own CSS file, full of
nav > button:nth-child(1):after { /*...*/ }
nav > button:nth-child(2):after { /*...*/ }
and then appending a <style> tag to the <head> with that text inside.
There will just be one rule inside each one of those selectors; the border-left width is going to be set to the actual width of the button, in pixels.
Terms and Conditions
Now you have exactly what you wanted, but it required JS and requires that the buttons be on the page before that code runs, and requires that the widths not change (through styling, or through media-queries, et cetera). If either of those things happens, and you want to keep the corners updated, that code needs to be run again.
And if that's the case, special care should be made to cache and reuse the style tag, so that you don't have 8 tags with the same rules, on the page.
Conclusion
If you're good with mostly-fine, go CSS-only.
If you're good with knowing that the fix doesn't have to respond in real-time, or be applied to more and more buttons that are dynamically added, go JS + CSS.
If neither of those is good enough, use an .svg or .png

Answer 2

Transform: skewY(deg);
will skew a div up like that, you might need to build it in layers though, and then skew the text -deg to unskew the text
Simple example:
https://jsfiddle.net/uex2umac/
.wrapper{
width:500px;
height:300px;
background-color:#000;
overflow:hidden;
}
.tobeskew{
width:280px;
height:220px;
margin-bottom:0px;
background-color:#f1f;
text-align:center;
transform:skewY(-15deg);
}
p{
transform:skewY(15deg);
line-height:220px;
font-size:40px;
color:#fff;
}
<Div class="wrapper">
<div class="tobeskew">
<p>Hello</p>
</div>
</div>

Answer 3

Here's a solution using SVG background images. Note that using SVG requires IE9+ though...
BODY
{
background-color: #333;
}
.button
{
float:left;
float: left;
font-family: sans-serif;
font-weight: bold;
font-size: 44px;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='%23282828'/></svg>");
background-size: 100% 100%;
color: #999;
height: 110px;
line-height: 96px;
padding: 0 50px;
margin-right: 10px;
}
.button.selected
{
color: #fbac31;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'><polygon points='0 0 100 0 100 100 0 115' fill='black'/></svg>");
}
<div class="button">
<div>ABOUT</div>
</div>
<div class="button selected">
<div>BIOS</div>
</div>