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

SVG is the recommended way to create such shapes. It offers simplicity and scale-ability.

We can use SVG's polygon or path element to create a shape like above and stroke / fill it with some solid color, gradient or a pattern.

Only one attribute, points, is used to define shapes in polygon element. This attribute consists of a list of points. Each point must have 2 numbers, an x coordinate and a y coordinate. A straight line is drawn automatically from the last point to the starting point to close the shape.

Below is the necessary code to create this shape:

<polygon points="10,12 265,10 285,93 265,184 10,184"
         stroke="#333"
         stroke-width="2"
         fill="#eee" />

Below is a brief description of the above code:

• points attribute defines the structure of the shape.
• stroke attribute defines the color for the outline / border.
• stroke-width defines the thickness of the outline / border.
• fill attribute defines the color for the interior shape to be filled.

Output Image:

Working Example:

body {
  background: #b6cdc7  url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <polygon points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="#eee" />
  </svg>
</div>

This shape can be filled with gradient or pattern as well.

Working Example:

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" />
  </svg>
</div>

We can apply shadow on this shape using SVG's filters.

Working Example:

body {
  background: #b6cdc7 url("https://www.hdwallpapers.net/previews/hot-air-balloon-over-the-mountain-987.jpg") no-repeat;
  background-position: center bottom;
  background-size: cover;
  margin: 0;
}

.box {
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

<div class="box">
  <svg width="300" height="200" viewBox="0 0 300 200">
    <defs>
      <linearGradient id="grad">
        <stop offset="0" stop-color="#11a798" />
        <stop offset="1" stop-color="#23645d" />
      </linearGradient>
      <filter id="shadow">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4" />
        <feMerge>
          <feMergeNode />
          <feMergeNode in="SourceGraphic" />
        </feMerge>
      </filter>
    </defs>
    <polygon id="shape" points="10,12 265,10 285,93 265,184 10,184" stroke="#333" stroke-width="2" fill="url(#grad)" filter="url(#shadow)" />
  </svg>
</div>

Answer 2

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>

Answer 3

Here is the solution I created

There are 2 simple ways to do this. The first, less efficient way is to have 2 elements. I take advantage of the :after pseudo element. I used position:absolute on the :after for 2 reasons.

1. You can place the element where you need to
2. It prevents the end of the triangle from being cut off

The key to creating the triangle is using the border property. You have 2 borders with the color of transparent set. These 2 borders are opposite of the direction you want to go. So if you want to make a right triangle, then use top and bottom. What gives the arrow it's shape is the last border. It also goes in the opposite direction. So for a right triangle, you would use border-left with a color. To get this to be the proper height, you must do half of the height of the box you want to place it on