Geek Answers Handbook

Inclined Boundary Buttons

I am trying to create buttons that look like this:

Hh6loGd.jpg

I can accomplish this with :after and CSS triangles , but I cannot get this to work with variable height elements. Is there a way to do this and keep the variable height?

Fiddle: http://jsfiddle.net/AaP47/2/

+6
source share
2 answers

In this case, you can use a skewed div. The only problem here is that when your buttons get taller, due to skew, they will be a little wider. This may not be a problem if you are dealing with only 1 or 2 lines. If they become very tall, this can lead to things not noticeably lining up for sure:

http://jsfiddle.net/AaP47/3/

 .button.triangle:after { content: ""; background-color: red; display: block; height: 100%; position: absolute; right: -30px; top: 0; width: 60px; transform: skewX(-10deg); }

It is also not fully scalable. You will need to determine the highest height that you must maintain and adjust accordingly. The higher you have to support, the wider the skewed div should be.

Result (no red): http://jsfiddle.net/AaP47/4/

+2
source

Just because it was fun for me to think in a different direction and offer the concept of options, although you probably already got the answer,

 a { padding-right: 20px; padding-left: 20px; text-decoration: none; color: white; font-weight: bold; display: inline-block; border-right: 30px solid transparent; border-top: 50px solid #4c4c4c; height: 0; line-height: 20px; } ap {margin-top: -45px;}

and

 <a href="#"> <p>this is a triangle button<br/> with multiple lines!</p> </a>

jfiddle: http://jsfiddle.net/AaP47/6/

Hooray!

+1
source

More articles:


All Articles