Jump to content
Sign in to follow this  
jasonnettles

tucked content corners in Platform Pro

Recommended Posts

jasonnettles

I was able to work out the rounded corners, but I am unable to figure out how to do the "tucked corners" effect found on css-tricks.

Content
body { background: #e6e6e6; } .corners { background: #f6f6f6; height: 700px; margin: 50px auto; max-width: 600px; position: relative; width: 80%; -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2); box-shadow: 0 1px 7px hsla(0,0%,0%,.2); } /* Corner Effect */ .corners:after, .corners:before { background: #e6e6e6; content: ''; height: 50px; position: absolute; top: -25px; width: 100px; -webkit-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5); -moz-box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5); box-shadow: 0 5px 10px -7px hsla(0,0%,0%,.5); } .corners:after { left: -50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .corners:before { right: -50px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } I believe the main problem is not having the correct div declarations, but I am not farmiliar enough with the wordpress core to be able to identify them in the more advanced core of platform. If someone could either tell me where to declare them, or what class to have this code under, i would appreciate it.

Share this post


Link to post
Share on other sites
kastelic
So you do have a div with class of "corners" somewhere on your website or are you trying to put this on a div that is part of the framework? Perhaps a link to your site can help us pinpoint the problem.

Share this post


Link to post
Share on other sites
jasonnettles
I would like to be able to either declare corners or apply this styling to an existing class if thats possible. Thanks for your response

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×