HTML5/CSS3のみで「下向き矢印」「右向き矢印」を作る方法

先日の記事で吹き出しをHTML5/CSS3を作りました。
somegoro.hatenablog.com

今回はそれを応用して、矢印を２パターン作ってみます。

下向き矢印

下向き矢印はこんな感じになります。
f:id:somegoro:20171005013737p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon {
  padding-bottom: 13px;
  display: block;
}
.formBalloon .formBalloonContent {
  border-radius: 3px 3px 0px 0px;
  width: 20px;
  height: 50px;
  position: relative;
  background: #101177;
  left: 20px;
}
.formBalloon .formBalloonArrow{
  border: 30px solid transparent;
  border-top: 30px solid #101177;
  position: absolute;
  height: 0;
  width: 0;
  z-index: 1;
}
.balloonMsg {
  padding-bottom: 1px;
  display: block;
  line-height: 1.4;
  text-indent: 0;
}
</style>
</head>
<body>
<div class="formBalloon" style="position: absolute; z-index: 2;">
  <div class="formBalloonContent"></div>
  <div class="formBalloonArrow"></div>
</div>
</body>
</html>

右向き矢印

右向き矢印は、こんな感じになります。

ソースコードです。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.formBalloon .formBalloonContent {
  width: 100px;
  height: 60px;
  background: #101177;
  display: inline-block;
}
.formBalloon .formBalloonArrow{
  border: 30px solid transparent;
  border-left: 30px solid #101177;
  position: absolute;
  height: 0;
  width: 0;
  display: inline-block;
}
</style>
</head>
<body>
<div class="formBalloon">
  <div class="formBalloonContent"></div>
  <div class="formBalloonArrow"></div>
</div>
</body>
</html>