The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Beveled corners & negative border-radius

2 posters

Go down

Beveled corners & negative border-radius Empty Beveled corners & negative border-radius

Post by Kami-sama 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.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Beveled corners & negative border-radius Empty Re: Beveled corners & negative border-radius

Post by Valoish 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
Valoish
Valoish
Forumember

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

http://www.canvastutorials.org/

Back to top Go down

Beveled corners & negative border-radius Empty Re: Beveled corners & negative border-radius

Post by Kami-sama 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.
Kami-sama
Kami-sama
Forumember

Female Posts : 407
Reputation : 12
Language : EN, RU, DE, LT
Location : Lithuania

http://hogas.huhohi.com/

Back to top Go down

Back to top

- Similar topics

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