Cute imageless popup

8 Responses

1. Adam Darowski

   Playing with this little imageless popup. Done with this (boo, extraneous) markup:

   <div class="arrow"></div>

   And this imagless (yaaaaaay) CSS:

   div.arrow {
   position: absolute;
   top: 20px;
   left: -40px;
   border-top: 20px solid transparent;
   border-bottom: 20px solid transparent;
   border-right: 20px solid rgba(0,0,0,.85);
   border-left: 20px solid transparent;
   }

   The approach takes a 0x0 pixel box and gives it 20px borders. That gives you the point. I then made three of the borders transparent. Weird and hacky, but does the trick.

   almost 2 years ago

2. Pro Philip Renich

   Angles through borders are always cool to me. Somewhere out here there's a font rendered completely through that method.

   almost 2 years ago

3. Pro Chris Gillis

   very nice adam

   almost 2 years ago

4. Jeremy Weiskotten

   It's the invasion of the Adam clones!

   Nifty technique. That tooltip needs a bit of (un-)opacity.

   almost 2 years ago

5. Pro Rich Thornett

   Looks like a very promising app from one of my top draftees.

   over 1 year ago

6. Adam Darowski

   I checked, and indeed I was your VERY FIRST draftee. :)

   over 1 year ago

7. Pro Rich Thornett

   I chose ... wisely.

   over 1 year ago

8. David Piehler

   I've been using Nicolas Gallagher's approach to make CSS arrows. It uses :after so it doesn't need an empty div, but the CSS code is more complex.

   over 1 year ago