左右にジグザグのあるボックスを作るには

Question

下のようなジグザグのあるボックスを作りたいのですが、どんなコードを書けばよいのでしょうか。

ネットで検索すると、上下にジグザグのあるボックスのコードは出てくるのですが、左右にジグザグのあるボックスはどんなコードを打てば出せるのかわかりません。

Comments

[m.ts10806]

まず自身が思ったようにやってみてください。
上下でできてるものがあるのなら考え方のヒントにはなるはずです。
できれば「このページ(URL)をヒントにこうやってみた」という形で追記してください。

Answer 1

CSS｜ジグザグ・ギザギザな境界線の作り方 | コトダマウェブ

上記のリンク先を参考に作ってみました。

<div class="zigzagbox">
</div>

.zigzagbox {
  width: 300px;
  height: 120px;
  background-color: #32a7f1;
  margin: 0 30px;
  position: relative;
  /*↓テキストの上下左右中央寄せ*/
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

.zigzagbox::before {
  background: linear-gradient(315deg, #32a7f1 50%, transparent 52%),
    linear-gradient(45deg, transparent 50%, #32a7f1 52%);
  background-size: 30px 30px;
  content: "";
  position: absolute;
  top: 0;
  left: -30px;
  height: 100%;
  width: 30px;
}

.zigzagbox::after {
  background: linear-gradient(45deg, #32a7f1 50%, transparent 52%),
    linear-gradient(315deg, transparent 50%, #32a7f1 52%);
  background-size: 30px 30px;
  content: "";
  position: absolute;
  top: 0;
  right: -30px;
  height: 100%;
  width: 30px;
}

動作確認用Codepenサンプル

Comments

[AmiI]

ありがとうございます、なんとかできました。
※文字の中央寄せ以外

[hatena19]

テキストの中央寄せも回答のサンプルに追加しておきました。

[AmiI]

すみません、わざわざありがとうございます。

Answer 2

すでに解決していますが、ジグザグが逆転しているのと本手であると思われる border-image でないのが気になったので挙げておきます。

.zigzag {
  border-right: 12px solid;
  border-left: 12px solid;
  border-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3e%3cpath fill='%230a529e' d='M0 12l12 12L24 12L12 0z'/%3e%3c/svg%3e") 0 12 round;
}

https://developer.mozilla.org/ja/docs/Web/CSS/border-image

Answer 3

文字をボックスで上下左右中央にするには

.zigzagbox { /ボックスのcss。名前はzigzagでなくてもOK。/
  width: 300px;
  height: 120px;
  background-color: #0454a4;
  margin: 0 30px;
  position: relative;
  display: flex; /*ここより下は文字を上下左右中央寄せにするためのコード*/
  align-items: center;
  justify-content: center;
  text-align:center /*文字の位置だけを上下左右中央にして、文字の流れる方向を左やら右やらにするときは不要*/
}

<div class="zigzagbox">あいうえお</div>

Comments

[x_x]

この回答は質問内容とは関係ないですよね。