chamotarooo https://blog.hatena.ne.jp/chamotarooo/ chamotaroooのブログ https://chamotaro.hatenablog.com/ 技術 はじめに 吹き出しの付いたラベルを作った。 「会員限定」と書いた青い角丸のラベルの下に、小さな下向きの三角を付ける。 三角は画像ファイルを使わず、React のコードに SVG で直接書いた。 <svg aria-hidden className="fill-brand" focusable="false" height="8" viewBox="0 0 12 8" width="12"> <polygon points="0,0 12,0 6,8" /> </svg> 3行に7つの属性が並ぶ。 12と8が何度も出てくるが、どれが大きさを決め、どれが形を決めるのかは、見ただけでは分からない。 … 190 <iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fchamotaro.hatenablog.com%2Fentry%2Ftech%2Finline-svg-triangle" title="コードに直接書いた三角のSVGを属性ごとに読む - chamotaroooのブログ" class="embed-card embed-blogcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 190px; max-width: 500px; margin: 10px 0px;"></iframe> Hatena Blog https://hatena.blog 2026-10-09 20:45:08 rich https://chamotaro.hatenablog.com/entry/tech/inline-svg-triangle 1.0 100%