CSS
-Tricks
treehouse :
what would you like to learn today?
Web Design
Web Development
iOS Development
Show search box
Search
Search in:
All
Articles
Forums
Snippets
Videos
✕
Home
Forums
Snippets
Gallery
Videos
Almanac
Demos
Lodge
Navigation 'n' Search
Forums
Illustration by Nick Sirotich
Forums
»
CSS Combat
how to make sharp corners css box style
abunour
Permalink to comment
#
September 2012
how can i make css box style like this one ..
http://img684.imageshack.us/img684/7283/howi.png
any help please !!
HugoGiraudel
Permalink to comment
#
September 2012
You'll need 2 nested elements in order to have 4 pseudo-elements, one for each corner. Then, you just have to give pseudo-elements the same background color as the background of your page, and rotate them.
Odd_E
Permalink to comment
#
September 2012
So I figured up to this out for you:
http://codepen.io/odd-e/pen/rluKn
abunour
Permalink to comment
#
September 2012
thanks for your help HugoGiraudel & Odd_E ..
is there another method to hide corners without make its like background color ?
because may be i'll set image as background page .. !!
in this case { cut1 & cut2 } will appear !!
Odd_E
Permalink to comment
#
September 2012
Nope, sorry. That's why this isn't really a solution, but it's the only non-image way. :-/
wolfcry911
Permalink to comment
#
September 2012
http://codepen.io/wolfcry911/pen/remhu
Add a Comment
http://img684.imageshack.us/img684/7283/howi.png
any help please !!
is there another method to hide corners without make its like background color ?
because may be i'll set image as background page .. !!
in this case { cut1 & cut2 } will appear !!