The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Beveled corners & negative border-radius

View previous topic View next topic Go down

Beveled corners & negative border-radius

Post by Kami-sama on January 12th 2017, 10:45 pm

Technical Details


Forum version : #phpBB2
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link : ( link is hidden, you must reply to see )

Description of problem

Hello!

So I wanted to implement code from this tutorial for couple tables.
http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

It seams that this part (linear and radial) is just not working in the forum. I have tested this so far only in Safari.

Any ideas how to have that effect or implement this code?
Thank you in advance!

Code:
background:
      linear-gradient(135deg, transparent 10px, #c00 0) top left,
      linear-gradient(225deg, transparent 10px, #c00 0) top right,
      linear-gradient(315deg, transparent 10px, #c00 0) bottom right,
      linear-gradient(45deg,  transparent 10px, #c00 0) bottom left;
   

EDIT:

Basically, I want to make negative radius border of a selected div.
Afterwards I want to apply some box-shadow, therefor it has to be done with single line.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Re: Beveled corners & negative border-radius

Post by Valoish on January 13th 2017, 2:13 am

What div are you trying to target? The code snippet you have above is just the CSS, without a selector div as a target, which is why it isn't working.
I tested the code from the tutorial itself (using Opera and Chrome) and it works fine when a div is targeted:http://prntscr.com/duya67
avatar
Valoish
Forumember

Female Posts : 291
Reputation : 54
Language : English
Location : NYC

http://www.canvastutorials.org/

Back to top Go down

Re: Beveled corners & negative border-radius

Post by Kami-sama on January 13th 2017, 12:40 pm

Ha ha Very Happy Hello, Valoish Very Happy

Please read my post again carefully.
It seams that this part (linear and radial) is just not working in the forum.

In the forum I used exactly the same code as in tutorial.
avatar
Kami-sama
Forumember

Female Posts : 317
Reputation : 7
Language : English, Russian, German, Lithuanian
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum