Search code examples
csscss-shapes

Cornered arrow in a division

I wanted to create something like a arrowed representation for a map, for which I am going to use the RickMarker Google API support. But I wanted to achieve something like the image below in CSS.

enter image description here

If it would not be feasible, please explain why and alternative method.

Solution

  • Caution: This answer is only to illustrate that achieving this shape is possible (albeit, with a complicated approach). Please do not use CSS for such complex shapes. You would be better off using PNG files.

    div {
  height: 100px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  border: 2px solid gray;
  background: -webkit-linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  background: -moz-linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  background: linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  position: relative;
}
div:before {
  position: absolute;
  content: '';
  height: 25px;
  width: 25px;
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;
  top: 87.5%;
  left: 40%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  background: white;
}
div:after {
  position: absolute;
  content: '';
  height: 3px;
  width: 40px;
  top: 10px;
  left: 168px;
  background: white;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}
    <div>Test bubble</div>

    Browser Compatibility - Tested in Chrome v24, Firefox v19, Safari v5.1.7 (on Windows).

    Final Output:

    enter image description here