cssでステップの流れや矢印を作りたい

前提・実現したいこと

以上のような形の流れのボックスを造りたいです
borderを使って似たようなものを作ることは出来たのですがSTEP2とSTEP3の間の矢印がうまく表せなく困っています

該当のソースコード

HTML
1<div class="contact__flow-area">
2		<div class="box01 contact__flow-list">
3			<div class="contact__flow-list-content">
4				<span class="contact__title-number">STEP1</span>
5			</div>
6		</div>
7		<div class="box02 contact__flow-list">
8			<div class="contact__flow-list-content">
9				<span class="contact__title-number">STEP2</span>
10			</div>
11		</div>
12		<div class="box03 contact__flow-list">
13			<div class="contact__flow-list-content">
14				<span class="contact__title-number">STEP3</span>
15			</div>
16		</div>
17</div>


.contact__flow-area {
    margin: 0 auto 40px;
    width: 100%;
}

.contact__flow-area:after {
    height: 0;
    visibility: hidden;
    content: ".";
    display: block;
    clear: both;
}
 
.contact__flow-list {
  display: flex; 
  align-items: center;
  justify-content: center;
  width: calc(100%/3);
  height: 60px;
  float: left;
  position: relative;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.contact__title-number {
  margin-bottom: 6px;
  display: block;
}

.contact__flow-area .box01 { 
  background: #003CB0; 
}
.contact__flow-area .box02 { 
  color: #000;
  border-top: 1px solid #B4B4B4;
  border-bottom: 1px solid #B4B4B4;
  box-sizing: border-box;
}
.contact__flow-area .box03 { 
  background: #78E4FE; 
  color: #000;
  border-top: 1px solid #B4B4B4;
  border-bottom: 1px solid #B4B4B4;
  border-right: 1px solid #B4B4B4;
  border-left: 1px solid #B4B4B4;
  box-sizing: border-box;
}
 
.contact__flow-area .box02:before,
.contact__flow-area .box03:before {
  border-left: 20px solid #FFFFFF;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
}
 
.contact__flow-area .box02:before { 
  border-left-color: #003CB0; 
}
.contact__flow-area .box03:before { 
  border-left-color: #fff; 
}
.contact__flow-list {
    color: #fff;
}

border以外で作る方法はありますか？
またborderでもつくるこｔ

参考

CSSだけで三角形を作ろう！その2：吹き出しやリボンをデザインする

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

回答2件

普通にsvgで書けばいいんじゃないですか？

投稿2020/09/01 06:57

yambejp

総合スコア116724

ベストアンサー

疑似要素 befroe と after を使ってグレーの三角形の上に白の三角形を重ねて少しずらせばどうでしょうか。

css
1.contact__flow-area .box02:before,
2.contact__flow-area .box03:before,
3.contact__flow-area .box03:after {
4  border-left: 20px solid #FFFFFF;
5  border-top: 30px solid transparent;
6  border-bottom: 30px solid transparent;
7  content: "";
8  position: absolute;
9  left: 0;
10  top: 0;
11}
12.contact__flow-area .box02:before { 
13  border-left-color: #003CB0; 
14}
15.contact__flow-area .box03::before {
16  border-left-color: #B4B4B4;
17  left: 0;
18  top: -1px;
19  z-index: 1;
20}
21.contact__flow-area .box03:after { 
22  border-left-color: #fff; 
23  left: -1px;
24  top: -1px;  
25  z-index: 2;
26}