タグの三角を画像に置き換える方法

SVGを使って三角アイコンをカスタマイズする場合、<details>タグ内に SVGを直接挿入して制御する方法があります。SVGのアイコンは自由にデザインでき、サイズや色も簡単に調整可能です。

以下は、SVGを三角形アイコンとして使う方法の例です。

<details><summary><svgclass="triangle-icon"width="12"height="12" viewBox="0 0 24 24"><polygon points="6,8 18,8 12,18" fill="#333" /></svg>クリックして展開
  </summary><p>詳細な内容がここに表示されます。</p></details>

/* detailsの初期設定 */details{position: relative;
  padding-left: 20px;
}/* summaryの基本スタイル */summary{list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
}/* SVG三角形の回転アニメーション */.triangle-icon{transition: transform0.3sease;
}/* detailsが開かれたときにアイコンを回転 */details[open].triangle-icon{transform: rotate(180deg);
}

解説

1. SVGの挿入: <summary>内に直接SVGの三角形を配置します。<polygon>の points属性で三角形の形を指定しています。
   • points="6,8 18,8 12,18"は、頂点が (6,8), (18,8), (12,18)にある下向きの三角形を作成しています。
2. transformの回転: CSSで .triangle-iconに transformプロパティを適用し、details[open]の状態で三角が180度回転するようにしています。