CSS H1の左上に三角マークを表示するには？

/ CSS / By
ショコラ
ショコラ

CSS H1の左上に三角マークを表示するには？

border-left と border-bottom で三角形をつくるのはテクニックですね。
padding-top と padding-left で文字の位置を調整しています。

もっさん先輩
もっさん先輩

左上にアクセントで三角を表示します。

<html>
<style>
h1
{
  position: relative;
  padding-top: 0;
  padding-left: 10px;
}
h1::before
{
  content: "";
  top: 0;
  left: 0;
  border-left: 10px solid #F00;
  border-bottom: 10px solid transparent;
  position: absolute;
  z-index: 100;
}
</style>
<body>
<h1>タイトル</h1>
</body>
</html>

左上の三角の中に文字をを表示します。

<html>
<style>
h1
{
  position: relative;
  padding-top: 0;
  padding-left: 24px;
}
h1::before
{
  content: "";
  top: 0;
  left: 0;
  border-left: 36px solid #F00;
  border-bottom: 36px solid transparent;
  position: absolute;
  z-index: 100;
}
h1::after
{
  font-size:10px;
  color: #fff;
  content:"New";
  top: 4px;
  left: 0;
  transform: rotate(-45deg);
  position: absolute;
  z-index: 101;
}
</style>
<body>
<h1>タイトル</h1>
</body>
</html>

以上

Scroll to Top