Draw triangle in corner of div

Question

I\'d like to draw some kind of triangle in the corner of a div. Because I don\'t want to use "px" I\'d like to achieve the same result also with percentage values.

Answer 1

Of course you can also have striped background similar to textbox resizers

.button {
  position: relative;
  width: 150px;
  height: 35px;
  background: black;
  border-radius: 8px;
  overflow: hidden;
}
.blue { background: #09f; }
.red { background: #f00; }
.orange { background: #f90; }
.green { background: #0c0; }

.button:after {
  content: '';
  width: 45px;
  height: 14px;
  background: repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.7),
    rgba(255,255,255,.7) 2px,
    transparent 2px,
    transparent 4px
  );
  border-style: 0px solid;
  right: -15px;
  bottom: -4px;
  position: absolute;
  transform: rotate(-45deg);
}