問題タブ [css-shapes]

CSSで破線のボーダーストローク間の長さと距離を制御することは可能ですか?

以下の例は、ブラウザによって表示が異なります。

大きな違い: IE 11 / Firefox / Chrome

破線の境界線の外観をより細かく制御できる方法はありますか?

下の（粗い）図の左下隅のような、CSS3で逆に丸みを帯びた角を作成する方法はありますか？

おそらく、境界半径をこの手法と組み合わせることができますか？

編集：私は吹き出しを探しているのではなく、左下のポイントの右側をカーブさせる方法を探しています。

六角形のグリッドである html ブロッ​​クを設計する方法はありますか? 蜂の巣に似ています。これは、CSS スタイリング タスクのように見えます。

それは基本的に正方形または円の輪郭である必要があります-それに応じてスタイルを設定できます（つまり、色を好きなように変更したり、境界線の太さを変更したりなど）

その円または正方形を他のもの (画像など) の上に適用したいのですが、中央部分をくり抜いて、正方形または円の下の画像が見えるようにする必要があります。

主にCSS + HTMLであることが望ましいです。

次の画像のような形のCSSレイヤーを作成することは可能ですか...

この形状の画像を作成でき、背景が透明な場合は、このような形状のレイヤーを作成できます...しかし、CSSレイヤーをこれらの形状のような実際の境界線に配置する必要はありません... CSS、jQueryなどの方法はありますか... 。

注：「これらのような形状とは、これら3つの例だけでなく、定義できる形状も意味します」

私はcssコードを持っています：

結果が得られます：

このように与える可能性はありますか？

のみを使用して次のデザインを再作成する必要がありますCSS。

写真に表示されているのは Web サイト コンテナーの上部です。「リンク」はメイン メニューの一部です。

現状では、コンテナを作成しましたが、画像を使用せずにナビゲーションを傾斜させる方法がわかりません。

記録のために: 特に複数のブラウザーに関しては、ブラウザーによってレンダリングされたボックスの影と一致する斜めのボックスの影の可能性はほとんどないため、画像を使用したくありません。

白い背景とボックスの影で配置および回転された div の線に沿って考えていましたが、まだ構築できていません。

何か案は？

私のUIの左側には順序付けられていないリストがあります。リストアイテムを選択divすると、その右側にが表示されます。とが出会うところに湾曲した外側の角が欲しいのですが。これを負の境界半径または逆コーナーと呼ぶ人もいます。下の画像の白い矢印を参照してください。<li><div>

青<li>をの端まで拡張するために<ul>、私は次のようなことを計画しています。

<li>の端まで延長するより良い方法はあり<ul>ますか？もちろん、webkitとmozilla borderradiusCSSも含めます。

私がよくわからない主なことは、アクティブの右下隅の下にある外側の隅<li>です。私にはいくつかのアイデアがありますが、それらはハックのようです。助言がありますか？

<ul>は灰色で示されていますが、実際のデザインでは白になっていることに注意してください。また、Javascriptを使用して、が選択された<div>ときに正しく配置することを計画しています。<li>

真っ直ぐではなく、上部のヘッダーセクションが斜めに見えるWebページを作成するための最良の方法（html、css、およびグラフィックスを使用）は何でしょうか？例として、以下の画像を参照してください。

さまざまなブラウザのサイズ/解像度に応じて拡大/縮小するような方法で画像を使用する方法がわかりません...

誰かが私に助けを提供できますか？または、おそらく私にリソースを教えてください。

ありがとう！

I'm looking for a way of to do a cross-browser iphone-like badge in CSS3. I'd obviously like to use one div for this, but alternative solutions would be fine. The important factor is that it needs to be horizontally and vertically centered in all browsers.

An interesting design issue about these notifications is that they cannot have a specified width (height is fixed) - they should be able to handle [in ascii drawing] (1) and (1000), where (1000) is not a perfectly rounded circle, but instead looks more like a capsule.

EDIT: Additional constraints (from Steven):

• No JavaScript
• No mangling of the display property to table-cell, which is of questionable support status