CSSだけで四角形の隅に三角マークを追加する

パーセントエンコード形式

HTML

<div class="s1">sample</div>

CSS

.s1 {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%2210%22%3E%3Cpath%20d%3D%22m0%200%2010%2010-10%200%22%20fill%3D%22%23f00%22%2F%3E%3C%2Fsvg%3E') no-repeat left bottom;
}

base64形式

HTML

<div class="s2">sample</div>

CSS

.s2 {
  position: relative;
  width: 200px;
  height: 200px;
  background: #eee url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHBhdGggZD0ibTAgMCAxMCAxMC0xMCAwIiBmaWxsPSIjZjAwIi8+PC9zdmc+') no-repeat left bottom;
}