CSS で境界線の描画スタイル( ではなく)を指定できるかどうかを知りたいですborder-style(少なくともwebkitで動作する必要があります)。
さて、私は次のような要素を持っていてdiv.border、それには four-side border があり5px silver solidます。ただし、クラス追加によっては のようdiv.border.red-markに、 を受け取りますborder-left: 15px red solid。レンダリング スタイルが長方形であり、線幅に適応しない(または点に角度を付ける) 必要があります。
明確にするために、この例を見てください。そして、私はそのようなものを得る必要があります。しかし、2 番目の例で行ったように、HTML 構造を変更することはできません。そのためには本当にCSSしか使えません。
出来ますか？
ここ:beforeでは、Josh Davenport が提供するソリューションがおそらく最良の回答ですが、完全を期すために、border-image.
border-imageは比較的新しい CSS 機能で、境界線のエッジとコーナーごとに画像を指定できます。これにより、境界線を希望どおりに正確に設計できます。
あなたの例は、かなり些細なケースです。私が言ったように、他の答えはおそらくあなたにとってより良いでしょう。しかし、より複雑なケースでは、ツールボックスにあると便利な小さな機能です。
詳細については、こちらの MDN を参照してください。
注意すべき点は (上記の MDN リンクで述べたように)、ブラウザーの互換性です。現在のほとんどのブラウザーで動作しますが、現在の IE バージョン (IE10 以前) では動作せず、他のブラウザーの古いバージョンでは問題が発生する可能性があります。ただし、特に Webkit ソリューションを探しているとおっしゃっていましたが、Webkit ブラウザーで長年サポートされているため、問題ありません。