Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Border Radius

Posted by Yury Aykin
Yury Aykin
18,115 Points

How to make a block to look like a triangle?

Can i make a borders straight cut to make a block look like triangle or diamond?

2 Answers

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

Hi Yury,

Chris Coyier over at CSS Tricks created an awesome page showing examples of how we can create shapes using pure CSS, go have a look at that as you can create things such as triangles quite easily.

http://css-tricks.com/examples/ShapesOfCSS/

Yury Aykin
Yury Aykin
18,115 Points

Thanks, Chris! That what I was looking for! :)

Yury Aykin
Yury Aykin
18,115 Points

Just realized, that there is no block, only borders with colors. What i meant: a custom type block (triangle for ex.) with overflow:hidden and image in it. So when I hover a mouse over, it transits into a square and shows the rest of an image? Smth like this:

<style>
.triangle-square{'triangle style'; overflow: hidden; transition:'triangle style';}
.triangle-square:hover{'square style'}
</style>
<body>
<div class="triangle-square">
<img src="thebeach.jpg"/>
</div>
</body>
Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

Ah, currently I don't believe there is a way to do that but I haven't messed around with properties like clip. I'll have a look around and see if there are any experiments.

Yury Aykin
Yury Aykin
18,115 Points

Thanks anyway :) I'll also try to figure it out.

Jennifer Hughes
Jennifer Hughes
11,421 Points
Jennifer Hughes
Jennifer Hughes
11,421 Points

Chris Coyier did a pretty awesome job with all of those border radius tricks. Thanks for sharing it, Chris Upjohn!