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

HTML

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

CSS

.s {
  position: relative;
  width: 200px;
  height: 200px;
  background: #ccc;
}
.s::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-bottom: 14px solid #f00;
  border-right: 14px solid transparent;
}