問題タブ [css-shapes]

多くのWebサイトが、次のようなものを使用して、現在のページまたはタブを示していることに気付きました。

ご覧のとおり、ページ番号を示す小さな矢印があります。純粋なCSSを使用してこれをどのように実現できますか、またはほとんどのサイトは、background-position属性を使用して位置を設定するdivの背景画像を使用しますか？これはかなり一般的な手法のようですので、前述の方法はかなりありそうにありません。

こことここで他の例を見ることができます。ソリューションが水平方向と垂直方向の両方で回転して機能する場合は便利です。

互いに左に浮かぶ2つのdivを作成したいのですが、傾斜した角度の付いた境界線でそれらを分離しています。私が何を意味するかを示すために写真を添付し​​ました。

CSSでこのようなことが可能かどうか誰かが知っていますか（オーバーフローでコンテンツを切り取る：隠されていると思います）

これらのdivには、境界線によって切り取られる画像が含まれている必要があります。例を次に示します。

片側に三角形のボタン (このhttp://css-tricks.com/triangle-breadcrumbs/のように) を線形の垂直グラデーションと境界線で作成する必要があり、純粋な CSS3 を使用したいと考えています。45度の「三角形」が必要な場合は問題ありません。次のように書くだけです

その疑似要素の半分を .button の下に隠します (したがって、三角形のように残りの半分だけが表示されます)。

しかし、別の角度 (より急な角度など) が必要な場合は、標準の XY 回転とスケーリングでは作成できません。たとえば、三角形の上半分に 1 つ、下半分に 1 つの 2 つの div を使用できますが、境界線とグラデーションに問題がある可能性があります。

カラーストップのある複数のグラデーションでそれを行うことは可能でしょうか?

私は、設計機関から提供されたこれらの逆曲線タブのcssをコーディングする方法に固執しました。

ここを参照してください：http：//max-guedy.com/images/tab.png

この画像のようなリボン効果を作成したい (画像の赤い部分):

境界のある矢印効果を作成しようとすると、オブジェクトの形状が完全に破壊されます。

HTML コード:

これまでの CSS コード (矢印を作成しようとせずに):

どうすればこれを作成できますか？

10px by 10pxバブルの右側に矢印を作成しようとしていますが、矢印が表示されません。これまでのところ、私は持っています:

CSS:

HTML:

ルイス:

CSS と HTML でシャープなフラット コーナーを作成する方法はありますか?

このようなもの：

背景画像を保持し、リンクする 2 つの三角形を必要とするプロジェクトに取り組んでいます。

これは、2 つの三角形をどのように使用するかについての私のモックアップです。

現在、各三角形を背景画像として 900x600 にまたがる 2 つの div しかありません。私が今抱えている問題は、シネマ div の透明部分にカーソルを合わせて写真 div に到達できないことです。

css3 三角形を使用してこのデザインを実現し、背景画像を設定できますか? カスタム シェイプは、境界線の色を使用して、境界線で構成されていると常に考えていました。

css3 三角形を使用することは可能ですか? もしそうなら、誰かがコードを手伝ってくれますか?

これが私が現在持っているものです。

css3でインセットボーダー半径を作成する方法はありますか? (画像なし)

次のような境界半径が必要です。

この形をCSSで作ってみました。

理想的には、ブラウザ ウィンドウの全長にまたがり、より大きな画面をサポートするために視野の外側に拡張し、角度が変化しないように中央に配置することもできます。

誰にも解決策はありますか？

また、角度のエイリアシングがひどくなるという問題が発生する可能性があると思います。画像の使用に頼る必要があるかもしれません。ただし、CSSを使用したい。

** 画像のスペル エラー。(無期限ではありません)