2021-05-19

【CSS】五角形の下矢印を作る方法。before と border を使用します。

CSS,プログラミング

こんにちは、ダイキです。
今回は CSS で、下矢印の五角形を作成してみます。
前回に右矢印の五角形を作成したので、下バージョンですね。

HTMLです。【CSS】五角形の下矢印を作る方法。before と border を使用します。


<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="flex">
    <div class="box">
      <div class="txt_wrap">
        <h3>beforeの<br>疑似要素を使うよ</h3>
        <p>borderで調整するよ</p>
      </div>
    </div>
  
    <div class="box">
      <div class="txt_wrap">
        <h3>beforeの<br>疑似要素を使うよ</h3>
        <p>borderで調整するよ</p>
      </div>
    </div>
  
    <div class="box">
      <div class="txt_wrap">
        <h3>beforeの<br>疑似要素を使うよ</h3>
        <p>borderで調整するよ</p>
      </div>
    </div>
  </div>
  

  <script src="script.js"></script>
</body>

</html>

CSSです。【CSS】五角形の下矢印を作る方法。before と border を使用します。


body {
  margin-top: 5rem;
}

.box {
  position: relative;
  width: 28%;
  height: 10rem;
  margin: 0 auto 5rem;
  background: #ddd;
}

.box:first-of-type {
  position: relative;
  border-radius: 10px 10px 3px 3px;
}

.box:first-of-type:after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 199px solid transparent;
  border-left: 199px solid transparent;
}

.box:nth-of-type(2) {
  position: relative;
  border-radius: 0 0 3px 3px;
}

.box:nth-of-type(2):before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 199px solid #ddd;
  border-left: 199px solid #ddd;
}

.box:nth-of-type(2):after {
  content: "";
  position: absolute;
  bottom: -59px;
  left: 0;
  border-top: 60px solid #ddd;
  border-right: 199px solid transparent;
  border-left: 199px solid transparent;
}

.box:last-of-type {
  position: relative;
  border-radius: 0 0 10px 10px;
}

.box:last-of-type:before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  border-top: 60px solid transparent;
  border-right: 199px solid #ddd;
  border-left: 199px solid #ddd;
}

.txt_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}