4

I'm building a little SCSS library of responsive isometric shapes (kind of like IsomerJS but DOM-based) for practice and fun architecture. One of the shapes I'd really like to make is an arch. Here's an example of what I mean:

http://codepen.io/anon/pen/ogqWKY

As you can see, my arch is just a prism with a transparent radial gradient on one side:

background: radial-gradient(ellipse at bottom, rgba(darken($color, 20%), 0) 0%, rgba(darken($color, 20%), 0) 60%, rgba(darken($color, 20%), 1) 60%, rgba(darken($color, 20%), 1) 100%);

It works pretty well in Webkit so far. I'm about 80% there, but if you look at it, the hole looks a little...flat. How can I add some depth illusion to the hole? I've tried multiple radial gradients, but I can't figure out a way to offset the inner gradient to form that 3d-like illusion. Any ideas?

While I'm asking, I'd also like to ask if anyone can give me a cone shape. A pyramid is easy (two triangles rotated 60deg around a square), as is a cylinder (the "tube" is just a rectangular shape with border-radius on one end and a horizontal linear-gradient for the illusion of depth). I started with this for a cone, but it really needs a gradient to give the illusion of depth, and as far as I know there's no easy way to apply this to the triangle shape in pure CSS (as triangles are usually built with borders, not backgrounds, and I can't selectively apply a border-image to only one border while keeping the others transparent).

Thanks in advance for your help!

jbutler483
  • 24,074
  • 9
  • 92
  • 145
tinypotato
  • 56
  • 2

1 Answers1

0

I'd suggest that you add a div.depth inside the arch's div to control the effect.

OR you could add conic-gradient at arch's after pseudo element.
This should be the final result:

<strong>background</strong>: radial-gradient(ellipse at bottom, rgba(25, 96, 144, 0) 0%, rgba(25, 96, 144, 0) 60%, #196090 60%, #19608F 100%), conic-gradient(from 141deg at 82% 89%, transparent 60%, #196090 50%);

It's not perfect, but it's something ¯_(ツ)_/¯

Barth
  • 1
  • 1