1. ホーム
2. パソコン
3. HTML & CSS

【CSS】transform:skewYで視線を下方向へ誘導する三角形をデザインする

投稿日 : 2024年03月24日 更新日 : 2024年03月24日

やりたいこと

HTML

<section></section>
<section></section>

CSS

section {
  position: relative;  /* 親要素にrelativeを指定 */
  width: 100%;
  height: 300px;
  overflow: hidden;
}
section:nth-of-type(1) {  /* 1つ目のsectionのbackgroundの色 */
  background: rgb(217, 255, 161);
}
/* before,afterの共通項目 */
section:nth-of-type(1)::before,
section:nth-of-type(1)::after {
  position: absolute; /* 子要素にabsoluteを指定 */
  content: "";
  background: #fff;  /* 二つ目のセクションのbackgroundと同じ色に */
  width: 50%;  /* 疑似要素は親要素の半分のwidth */
  height: 200px;
  bottom: -100px;
}
section:nth-of-type(1)::before{
  left: 0;
  transform: skewY(12deg);  /* 角度はお好みで調整 */
}
section:nth-of-type(1)::after {
  right: 0;
  transform: skewY(-12deg);  /* 角度はお好みで調整 */
}

skewYを微調整

まとめ