CSSで矢印を作成する方法

Question

CSSで添付のような矢印を作成したいのですが、可能でしょうか。

after擬似要素でborderを利用したやり方で矢印を作成する方法がありますが、
この角度はbeforeも使わないとダメかと思っております。

Comments

[m.ts10806]

「可能でしょうか」というと「可能です」だけの回答になるか「問題・課題がない」となります。そうでないのでしたら「コードください｣の丸投げ質問になります。自身の考えや調べたことに基づいて組んだコードを提示して「何が」「どう」分からないのか具体的に記載してください。

[jyoze]

失礼いたしました。今後はもっと具体的に記載するようにいたします。

[m.ts10806]

質問も回答もコメントも編集可能です。適宜対応してください。

Answer 1

質問の仕方については次回以降直していただくとして，質問者様がお望みのものは，
skewX()とborder-right，border-bottomによって，１つの擬似要素で実装可能です

• デモ：https://thimbleprojects.org/liveasnotes/530204/

右上の「リミックス」ボタンでコードの閲覧ができるので，
どのようにして実装されているかは，ご自分の目で確認してください

---

回答がなぜか送信できず，リロードしたら自己解決とのことで安心
一応自分の答えも載せておきます

Comments

[jyoze]

ありがとうございます。
こんな方法があるとは知りませんでした。
勉強になりました。ありがとうございます！

Answer 2

ご迷惑をおかけしました。
色々なサイトを調べて、下記のでなんとか同じ形ができました。
今後は具体的にやってみたコードまで記載するようにします。

.arrow {
	display: inline-block;
  position: relative;
  padding: 10px 80px;
  border: 1px solid #fff;
  color: #fff;
  text-decoration: none;
}

.arrow::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  margin: auto;
	width: 45px;
	height: 10px;
	border-bottom: 1px solid #fff;
}
.arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: -10px;
  right: 10%;
  margin: auto;
	width: 20px;
	height: 10px;
	border-top: 1px solid #fff;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
}