矢印の中に文字を書きたい

Question

お世話になっております。

　｜抽出｜
  \    /
    /

上記のようなWebページを書きたいと思っております。

cssとhtmlだけで出来そうな気がしてグーグルさんで調べているのですが
見つけることは出来なかったため
博識なteratailの方々にお伺いする失礼をお許しください。

文字入り下矢印の実装方法をご存知な方はお教え頂けないでしょうか？

お忙しい所大変申し訳無いのですが上記お問い合わせいたします。

Answer 1

まずパワポとかで，簡単な図を使って矢印を作ってみてください

そうすると，矢印が四角形と三角形によって出来ていることが分かります

質問者様の示したイメージでは，四角形の部分に文字が入っていますよね？
なら，まずは文字が入った四角形を作れば良いのです．

次に，三角形はどうしましょうか？
これは調べないと分からないかもしれません
ググってみましょう→「css 三角形」

borderプロパティが使われているパターンや，
backgroundプロパティが使われているパターンなどがあることが分かると思います．
三角形もHTML,CSSで出来そうですね

もし，「たったこれだけのために，HTMLに要素を2つも書くのはめんどくさい」と思ったのなら，
ぜひ「擬似要素」や「背景画像の複数指定」を使った方法についても考えてみてください

• CSSの疑似要素とは？beforeとafterの使い方まとめ
• CSSで背景画像を複数設定する
• backgroundまとめ。ショートハンド、複数指定、各プロパティ

最後に，検索する際のコツを振り返っておきます

まず，実装したいものが，どのような要素・スタイルの組み合わせになっているのかを考えます
その中で，自分がやりかたを知らないものがあったとき，それを検索しましょう

いくら世界が広いといえども，自分のイメージと全く同じものがインターネットで見つかるとは限りません．
分解して，ピンポイントで調べてみてください

Comments

[moitaro]

ありがとうございます。
excelで矢印を作って文字を入れました。

cssで矢印を作りたかったのですが
まだまだ勉強不足だったので……

コメントありがとうございました。

Answer 2

あ……
今気が付きましたが
これって結構丸投げしすぎですね……
失礼しました。

もうちょっと自分で調べます……

ですがどういったワードでググるのが良いのかのアドバイスは欲しいです……

Comments

[webarata3]

文字入り矢印 CSS　とかで引っかかりますよ。

[m.ts10806]

回答ではなく質問に追記された方が良いかと。

[moitaro]

ありがとうございます。
文字入り矢印 CSS　でもうちょっとグーグルさんで調べますっ
見つけられないのです……(T_T)

[m.ts10806]

https://saruwakakun.com/html-css/reference/image-text
↑とか参考に文字の位置を調整すれば言いだけのように見えます（検証はしていませんが）