2

上部が下部よりも 10px 広いボックス シャドウで台形を作成しようとしています。過去に、次の jsfiddle で説明されているように台形を作成しましたが、要素にボックス シャドウを配置すると、斜めの境界線に影を付けるのではなく、outerWidth を四角形で囲んでいることに気付くでしょう。

#trapezium {
   margin:20px auto;
   height: 0;
   width: 80px;
   border-bottom: 80px solid blue;
   border-left: 40px solid transparent;
   border-right: 40px solid transparent;
   box-shadow:0 0 10px #333;
}

http://jsfiddle.net/YhePf/8/

私の最初の考えは、次のようなものを使用することです。

-webkit-transform:perspective(100) rotateX(1deg);

そんな感じ。これは確かに問題を解決し始めていますが、「パースペクティブ」で100という数字が何を指しているのか、また、方法に関係なく、上部の幅が下部よりも正確に10px広いことを確認する式を計算する方法がわかりませんこの要素の高さまたは幅。

任意のヒント？または、これをやってのける 3 番目のオプションはありますか?

4

1 に答える 1

1

あなたが構築したものは、台形 (別名台形) 形状の要素ではありません。これは、ボーダー スタイルが台形の外観を作成する長方形の要素です。これが、ボックスの影が長方形である理由です。

独自の -webkit-transform プロパティを使用しても、実際の要素の形状は変わりません。

真に長方形ではない要素を作成するには、SVG を使用する必要があります。Multi-Shaped CSS Layers \ Non-rectangular CSS Layerまたはnon-rectangular hoverable areaを参照してください。

于 2012-11-14T21:19:57.557 に答える