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

HTML

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

CSS

.s {
  width: 200px;
  height: 200px;
  background: #ccc;
  background-image: linear-gradient(45deg, #f00 10px, transparent 0),
                    linear-gradient(-45deg, #f00 10px, transparent 0),
                    linear-gradient(135deg, #f00 10px, transparent 0),
                    linear-gradient(-135deg, #f00 10px, transparent 0);
}