2013-10-18 16 views
7

私はcssシェイプを発見しました。興味があります(ボーダーは実線、点線、点線)です(shapes)。CSSシェイプのボーダー

私が考えた最初のことは、別の形にしてz-インデックス(http://jsfiddle.net/gYKSd/)でバックグラウンドに置くことでしたが、実線の境界線としてのみ効果があります。

HTML:

<div class="triangle"></div> 
<div class="background"></div> 

はCSS:

 .triangle { 
     position: absolute; 
     top: 14px; 
     left: 10px; 
     height: 0px; 
     width: 0px; 
     border-right: 50px solid transparent; 
     border-left: 50px solid transparent; 
     border-bottom: 100px solid red; 
     z-index: 0; 
} 
     .background { 
     position: absolute; 
     top: 0; 
     left: 0; 
     height: 0px; 
     width: 0px; 
     border-right: 60px dotted transparent; 
     border-left: 60px dotted transparent; 
     border-bottom: 120px dotted gray; 
     z-index: -1; 
    } 
+7

を望んでいた形を生成しないので....上記のCSS形状は、固体の境界線と一緒に来て、それらの角度で作られて言ったように要素が境界線で作られているため、境界線が別の境界線を持つことができないため、これを行うことはできません。それはあなたが余分な要素を追加することによってそれを「偽造」することはできないと言っているわけではありませんが、それはあなたが求めたものではありません。 –

+1

CSSシェイプはハックです。 CSSは図形を描画するためのものではありません。確かに、もし必要なら基本的な三角形のためにそれを使用してください;誰もがやります。しかし、あなたができないので、それが一歩進んで行くことを期待しないでください。ハックの性質は、それが得られるほど良好であるということです。それ以上のものが必要な場合は、SVGのようなブラウザの適切なグラフィックスツールを使用してください。 – Spudley

+0

@Paulie_Dええ、申し訳ありませんが、私は明確ではありませんでした。しかし、私はこの作業を解決するためのトリックを意味しました。 –

答えて

3

あなたのソリューション(バックグラウンドdivの位置を決める)は、シェイプがシェイプとしてブラウザで認識されないため、CSSで取得する最も実行可能な方法です。

あなたは四角形を取って点のバーストを作るためにコピーして回転させることができます。それは点のバーストのように見えますが、ブラウザに関しては点のバーストではなく3つの四角形があります。境界線を置くと、境界は各四角形の周りになります。

小さな四角形を作って回転させ、 "形状"の端にそれらを配置して "境界線"を作成することができます。そうです。実用的ですが、すべての実用的な目的のために、それは狂っています。

オンザフライでシェイプを描画する必要がある場合は、HTML5キャンバスIntro to canvas drawingをご覧ください。


SVGは現在有効なオプションでもあるsince all recent browsers support itです。

+0

とSVG :)と+1 – FelipeAls

+0

ありがとうございます。あなたが正しい。私はブラウザのサポートが貧弱なために、少し前にsvgをあきらめていましたが、これは最近のブラウザではもはや問題ではないようです。 – Sylverdrag

+0

@Sylverdragもっと多くのリソースを必要とするキャンバスやSVGが何であるか知っていますか? SVGを使ったことは一度もありませんでしたが、私は以前はキャンバスを使っていましたが、それは速いもののようには思えませんでした。 –

0

何をやっていることは形状が国境から作られているという事実に依存しているので、私は、それが可能だとは思いません。

既に境界線に境界線を追加することはできません。

あなたのフィドルで示したように、背景の形をとることで別の境界をエミュレートできます。

0

いくつかは、あなたが境界線のスタイルを変更することはできませんか、あなたは基本的に