問題タブ [css-shapes]

タブ付きメニューの次の HTML を検討してください。

これが可能かどうかはわかりませんが、タブの形状をborder-radiusでこのように見せたいです。画像はありません。上の部分は簡単ですが、下の部分、線上でどのように曲がるかは、可能かどうかわかりません。

これがjsfiddleです

グラフィックの背景があり、左上隅に色付きの三角形を表示する必要があります（解像度とは関係ありません）。

幅=100％、高さ= 200px、背景=赤のHTML / CSS / JSのみを使用して三角形の要素を作成できますか？

width = 100％のIMGで作成できますが、画像のサイズを変更するよりも良い解決策を望んでいました。

このソリューションは、IE7 +と互換性があり、ブラウザーのバージョン（2％以上）を使用している必要があります。

ありがとう

この画像（添付）を持っています。私はデザイナーではありませんが、アプリで画像を使用したくありません。cssを使用すると、画像に非常に近づくことができると聞きました。誰かがこの画像とCSSの同等物に変えるのを手伝ってくれますか

ありがとう！

試してみました

それを私の現在のcssに追加する方法がわから ない

上記の問題は、テキストに背景がなくなったことです... background-colorを使用する場合は、border-left：10pxの白一色を使用する必要があります。これは、このレイヤーのように、さまざまな背景画像で見栄えがよくありません。画像の上に座ってください。

マーカーやギターのピックのようなCSSのみのシェイプを作成したいと考えています。

私が取り組んできた Codepen デモ: http://codepen.io/Vestride/pen/otcem

曲がりくねったエッジをポイントで複製することに失敗しました。理想的には、これを 1 つの要素 (+疑似要素) で実現したいと考えています。

html と css のみで Facebook Status TextBox のような湾曲した TextBox を取得するにはどうすればよいですか?

誰でもその方法を説明できますか??

私は視覚的に次のように見える CSS でカスタム形状を作成する方法を理解しようとしています:

と のプロパティbackground:rgba(44, 44, 48, 0.9)でborder:6px solid rgba(29, 30, 35, 0.9);

私の問題は、右上と左下の境界線を提供した画像のように見せる方法が見つからないことです。CSS-Tricks の CSS Custom Shape のヒントを試してみましたが、背景を設定できないため、問題は解決していないようです。何か案は？

ジグザグの境界線を持つヘッダーに取り組んできました。これを行う 1 つの方法は、画像を使用してジグザグ効果を作成することです。

(1) 画像を使用せずに CSS で実用的なクロスブラウザー ジグザグ ボーダーを作成する方法はありますか?

また、ジグザグに伸びるこのヘッダーにテクスチャ付きの背景を配置しようとしています。ただし、ヘッダーの縦方向のサイズが変わる可能性があり、ヘッダーを単一の画像として実装することはできません。

ジグザグ エッジとヘッダー要素の両方にテクスチャを追加しようとすると、テクスチャが同期しなくなる可能性があります。

(2) 非同期にならずにジグザグに伸びるテクスチャ付きの背景を実装するアイデアはありますか?

私の [古い] コード (テクスチャと共に) はjsFiddleにあります。

編集＃1：

コードをありがとうアナ。私はそれを取り、それを改善しました。

http://dabblet.com/gist/3401493

一貫した背景が可能になるとは思いません。

角を丸くするために、border-radius プロパティを使用しています。しかし、この形状の角を丸くする方法がわかりません。どちらの側からも同じ寸法を指定しようとしましたが、正確な形状が得られません。ここにいくつかの CSS3 プロパティがありませんか?

clip css プロパティが答えかどうか疑問に思っています。

アップデート：

http://jsfiddle.net/YWnzc/136/

これを作成しようとしています：

それを達成するための最良の方法は何ですか？

必須: テキストはテキストのままにしておく必要があります (画像を使用しないでください)。また、別のテキストを入れることができるように、これを再利用できるようにしたいと考えています。理想的には、矢印部分はテキストと同じ高さにする必要があります。

あると便利: これを任意の背景にドロップできるようにしたい (常に白であるとは限らない)

ありがとう！！

これに似た不規則な形の div を構築する可能性はあるのでしょうか (グリーンランド、ヨーロッパ、アフリカなど)。CSS3とHTML5を使ってこんな地図を作りたいです。

サンプル画像へのリンクは次のとおりです。