Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 31, 2012, 11:31 AM   #1
AFPoster
macrumors 65816
 
Join Date: Jul 2008
Location: Charlotte, NC
css3 corner slants not rounded

So I know using border-radius we can round out the corners of a <div>. Is there a want to make a slanted corner like in the screen shot?
Attached Images
 
__________________
2012 15" MacBook Pro 2.3Ghz i7
iPad 2 32gb (white)
iPhone 5s 16gb x2
AFPoster is offline   0 Reply With Quote
Old Dec 31, 2012, 02:55 PM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Personally I'd use a tiny .png image background image positioned bottom right of a div container and offset to the left a bit. The div would also be set with a similar border color and size. Using an image assures cross browser compatibility at the sacrifice of a little bandwidth but it will be cached and file size would be very small.

Beyond that, there are ways to do it purely with CSS although it gets a little complex and might not be fully MSIE compatible. Please visit this site which allows you to fiddle with both the HTML and CSS to customize slanted corners:

http://jsfiddle.net/NGLN/k86Mr/2/

(You'll notice if you comment out .box .head selector with the image you can still see the slanted corners which is what you asked about, the example creates more than just slanted corners but a nice looking sidebar dialog or content block like you'd typically find on a site) FYI

-jim
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com

Last edited by SrWebDeveloper; Dec 31, 2012 at 03:05 PM. Reason: Fixed link typo
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 31, 2012, 05:15 PM   #3
AFPoster
Thread Starter
macrumors 65816
 
Join Date: Jul 2008
Location: Charlotte, NC
Quote:
Originally Posted by SrWebDeveloper View Post
Personally I'd use a tiny .png image background image positioned bottom right of a div container and offset to the left a bit. The div would also be set with a similar border color and size. Using an image assures cross browser compatibility at the sacrifice of a little bandwidth but it will be cached and file size would be very small.

Beyond that, there are ways to do it purely with CSS although it gets a little complex and might not be fully MSIE compatible. Please visit this site which allows you to fiddle with both the HTML and CSS to customize slanted corners:

http://jsfiddle.net/NGLN/k86Mr/2/

(You'll notice if you comment out .box .head selector with the image you can still see the slanted corners which is what you asked about, the example creates more than just slanted corners but a nice looking sidebar dialog or content block like you'd typically find on a site) FYI

-jim
thanks!
__________________
2012 15" MacBook Pro 2.3Ghz i7
iPad 2 32gb (white)
iPhone 5s 16gb x2
AFPoster is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
Map issue HTML5 & CSS3 JamesD95 Web Design and Development 3 Apr 16, 2014 02:57 PM
best forum/group of html5 & css3? umbilical Web Design and Development 5 Jan 25, 2013 03:18 AM
CSS3 height transition tech4all Web Design and Development 0 Jul 7, 2012 05:14 PM

Forum Jump

All times are GMT -5. The time now is 12:56 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC