円の中に文字がある物の中に下向き三角を、円の文字の下に円の中央に入れるには

下のような円の中に文字がある物は作りました。

ここから、CSSで作った下向きの線だけの三角を物を、円の文字の下に円の中央に、疑似要素を使って配置したいのですが、初心者で上手くできません。

cssで作ったものは、この様なものです。

どのようにしたら、上手く円の中の文字の下で、円の横幅の真ん中に配置できるでしょうか？
疑似要素を使って、配置させたいです。

円を作った時のコードはこちらになります。

HTML
1<nav class="main-section_nav">
2        <ul>
3         <li><a href="">1.テキストテキストテキスト</a></li>
4         <li><a href="">2.テキストテキストテキスト</a></li>
5         <li><a href="">3.テキストテキストテキスト</a></li>
6          </ul>
7      </nav>

CSS
1.main-section_vav {
2width: 960px;
3}
4
5.main-section_nav li {
6  list-style: none;
7  border-radius: 50%;
8  border: 1px solid black;
9  width: 250px;
10  height: 250px;
11  text-align: center;
12  line-height: 250px;
13  display: flex;
14  justify-content: space-around;
15}
16
17.main-section_nav ul {
18  display: flex;
19  justify-content: space-around;
20  align-items: center;
21  padding: 0;
22  width: 960px;
23  height: 400px;
24  margin: 0 auto;
25}
26
27.main-section_nav a {
28  color: black;
29  text-decoration: none;
30}

CSSで三角作ったコードはこちらです。

　width: 30px;
  height: 30px;
  border: 5px solid;
  border-color: transparent #565656 #565656 transparent;
  transform: rotate(45deg);

まだ初心者で、質問上手く出来てないかもしれませんが、よろしくお願いします。

s8_chu

2020/02/04 12:03 編集

「円の文字の下に円の中央に」というのは、「CSSで作った下向きの線だけの三角を物」を文字の下に左右中央配置にしたい、という理解で良いでしょうか？例えば、このような動作でしょうか ( https://jsfiddle.net/jdnb0g6o/show )。

shinaozora50

2020/02/04 12:39

言われてる通りです。そのようにしたいんです。

行動規範の内容に同意します

回答2件

下記のようなことでしょうか。

css
1.main-section_vav {
2  width: 960px;
3}
4
5.main-section_nav li {
6  list-style: none;
7  border-radius: 50%;
8  border: 1px solid black;
9  width: 250px;
10  height: 250px;
11  text-align: center;
12  line-height: 250px;
13  display: flex;
14  justify-content: space-around;
15  position: relative; /*追加*/
16}
17
18.main-section_nav ul {
19  display: flex;
20  justify-content: space-around;
21  align-items: center;
22  padding: 0;
23  width: 960px;
24  height: 400px;
25  margin: 0 auto;
26}
27
28.main-section_nav a {
29  color: black;
30  text-decoration: none;
31}
32
33/*以下追加*/
34.main-section_nav li::after {
35  position: absolute;
36  content: "";
37  width: 30px;
38  height: 30px;
39  border: 5px solid;
40  border-color: transparent #565656 #565656 transparent;
41  transform: rotate(45deg);
42  bottom: 60px;
43}

動作確認用サンプル

投稿2020/02/04 12:32

hatena19

総合スコア33699

shinaozora50

2020/02/04 12:58

教えてもらったように追加でcssを書いたのですが、bottom: 60px;を書くと、文字の上の方の円の線に近いところに、三角が来るようになってしまいました。自分で色々やってみてｔ、bottom: -130;にすると、動作確認サンプルみたいに文字の下に三角が来ました。何が悪くてbottom: 60px; では駄目だったんでしょうか？ liの要素のbottomの位置が、円の下には何かの理由でなってなかったのでしょうか？