Arrow Box with CSS

Question

How can I make this box in CSS?

I've seen a few tutorials that teach how to create boxes with arrows, however, in my case, none of those tutorials are suitable.

Answer 1

I created your element with the surrounding 1px border. I'm using one <div> element and taking advantage of the :before and :after pseudo-elements (browser-support). The main rectangle has a regular 1px border, but the triangle elements are essentially 2 triangles, one darker than the other.

The lighter triangle sits on top of the darker triangle, which has the effect of hiding it, and is shifted slightly to the left to show the darker triangle underneath. The resulting illusion is a 1px dark border on the triangle itself.

Here's a question that asks a similar question:

How can I create a "tooltip tail" using pure CSS?

One of the answers actually has a great explanation of how one can achieve this triangle effect:

https://stackoverflow.com/a/5623150/196921

Also, this is an excellent reference for all the fancy things you can do with borders (thanks to PSCoder):

• http://css-tricks.com/examples/ShapesOfCSS/

... and here's a sweet css generator (thanks to David Taiaroa):

• http://cssarrowplease.com/

---

Anyway, here's the corresponding code:

    #arrow {
      width: 128px;
      height: 100px;
      background-color: #ccc;
      border: 1px solid #999;
      position: relative;
    }
    #arrow:after {
      content: '';
      position: absolute;
      top: 0px;
      left: 128px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #ccc;
    }
    #arrow:before {
      content: '';
      position: absolute;
      top: 0px;
      left: 129px;
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-left: 12px solid #999;
    }

<div id="arrow"></div>