tucked content corners in Platform Pro

[jasonnettles 0]

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.

[kastelic 6]

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.

[jasonnettles 0]

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