私は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;
}
を望んでいた形を生成しないので....上記のCSS形状は、固体の境界線と一緒に来て、それらの角度で作られて言ったように要素が境界線で作られているため、境界線が別の境界線を持つことができないため、これを行うことはできません。それはあなたが余分な要素を追加することによってそれを「偽造」することはできないと言っているわけではありませんが、それはあなたが求めたものではありません。 –
CSSシェイプはハックです。 CSSは図形を描画するためのものではありません。確かに、もし必要なら基本的な三角形のためにそれを使用してください;誰もがやります。しかし、あなたができないので、それが一歩進んで行くことを期待しないでください。ハックの性質は、それが得られるほど良好であるということです。それ以上のものが必要な場合は、SVGのようなブラウザの適切なグラフィックスツールを使用してください。 – Spudley
@Paulie_Dええ、申し訳ありませんが、私は明確ではありませんでした。しかし、私はこの作業を解決するためのトリックを意味しました。 –