【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 {
  width: 90%;
  margin: 15rem auto;
}

.flex {
  display: flex;
  justify-content: space-between;
}

.box {
  position: relative;
  width: 29%;
  height: 13rem;
  background: #ddd;
}

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

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

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

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

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

.box:nth-of-type(2) .txt_wrap {
  top: 44%;
}

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

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

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