css - シェブロン形の div を作成するための三角形の境界線を持つボックス シャドウ

Question

山形の div のグループを作成しようとしていますが、リボンが内部三角形の形をしているこの記事に出くわしました。 http://css-tricks.com/snippets/css/ribbon/

三角形に続く外部境界線を追加しようとしていました。これにより、画像を使用せずに探している効果が得られます。

残念ながら、ボックス シャドウを追加しようとすると、三角形のビットの周りの影ではなく、div の周りの四角い影になってしまいました。

これを達成する方法について何か提案はありますか?

Answer 1

現在、長方形と角丸長方形以外の形状の CSS シャドウを作成する簡単な解決策はないと思います (を使用border-radius)。しかし、(より複雑ではありますが) 可能性は、box-shadow と共に CSS3 変換回転を使用することだと思います。ここでいくつかのテクニックを取り上げることができます。これらのテクニックは、必要に応じて変更することができます。