Triangle from pseudo element

by aflynt

HTML

<div id="box"></div>

CSS

#box {
  background: lightblue;
  height: 6em;
  position: relative;
  width: 10em;
}

#box:before {
  border-bottom: 40px solid transparent;
  border-left: 40px solid transparent;
  border-top: 40px solid green;
  content: '';
  height: 0;
  position: absolute;
  right: 0;
  width: 0;
}

#box:after {
  color: white;
  content: '\2b';
  position: absolute;
  right: 8px;
  top: 4px;
}

JavaScript

/*

#box builds the box

#box:before adds the green triangle

#box:aafter adds the plus sign

*/