polygon () CSS function example

備忘録

Bootstrapの水平方向(横)のカードに組み込んだ例

left

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

right

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

*Order classes で並びを変えています
Columns · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/layout/columns/#order-classes

CSS

@media only screen and (min-width: 768px) {
  .left {
    clip-path: polygon(0 0, 92% 0%, 100% 100%, 0% 100%);
  }
  .right {
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 8% 100%);
  }
}

関連情報

CSS polygon() 関数 - CSS | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Values/basic-shape/polygon