問題タブ [css-shapes]

CSS の三角形 (境界線) にカスタムの 16 進数の色を使用しようとしています。ただし、境界プロパティを使用しているため、これを行う方法がわかりません。単に互換性のために、javascript と css3 を避けたいと思います。三角形の背景を白い背景に 1 ピクセルの境界線 (三角形の角度のある辺の周囲) に色 #CAD5E0 を設定しようとしています。これは可能ですか？これが私がこれまでに持っているものです：

私のフィドル: http://jsfiddle.net/4ZeCz/

山形の div のグループを作成しようとしていますが、リボンが内部三角形の形をしているこの記事に出くわしました。 http://css-tricks.com/snippets/css/ribbon/

三角形に続く外部境界線を追加しようとしていました。これにより、画像を使用せずに探している効果が得られます。

残念ながら、ボックス シャドウを追加しようとすると、三角形のビットの周りの影ではなく、div の周りの四角い影になってしまいました。

これを達成する方法について何か提案はありますか?

アンカーのテキストを垂直方向に中央揃えにしようとしています。私は line-height を使用しましたが、機能しますが、テキストが折り返されると、2 行目のテキストが line-height になります...どうすればアンカーのテキストをそのように失敗することなく中央に配置できますか?

このコード スニペットを実行し、円をクリックして他の円を表示すると、意味がわかります。

可能な限り多くのブラウザをサポートしたいと考えています。より多くのブラウザーをサポートするために追加のプロパティを追加する場合は、コメントを追加して、どの行がどのブラウザーに対応しているかを示してください。

私は視差効果を使用しているウェブサイトに取り組んでいます。このように、三角形の形をした画像がいくつかあります。

& 上記の DIV と重なるため、画像が透明になります。私はcssで非常に多くのことを試みています。しかし、望ましい結果が得られませんでした。固定幅で目的の結果を達成します。これを確認してくださいhttp://jsfiddle.net/eJ7Sf/2/ しかし、流動的な幅では機能しません。私がまだ試しているがうまくいかなかったことを確認してください

http://jsfiddle.net/ceGGN/3/

http://jsfiddle.net/eJ7Sf/1/

注: css3 MASKプロパティについては知っていますが、Firefox の以前のブラウザーでは機能しません。firefox 3.6.13までの機能が欲しい

私はdivを次のように円に変えることができます：

しかし、私は幅の高さを指定する必要があります：

「折り返しなし」でDIVに3行のテキストを表示したいので、テキストの3つのセグメントのそれぞれに独自の行があり、折り返されません。

これらを円の中心に表示し、テキストの行に合わせて円を拡大したいと思います。

テキスト行はPHPを介してデータベースから取得され、文字の長さが異なります。

問題は、上記の方法が幅/高さが指定されている場合にのみ機能することです。

これは、CSSのみを使用して、パーセンテージを使用して可能ですか、それともJSの回避策が必要ですか？

前もって感謝します。

HTMLとCSSのみを使用して以下の湾曲した帆の形状を作成することは可能ですか？

この回答から、次を使用してストレートサイドセイルを作成できることがわかります。

これは次のようになります：

または、境界線の半径を少し近づけることができます。

これは次のようになります：

しかし、私が本当に望んでいるほどエレガントではありません。上部の帆のイメージは、穏やかでエレガントな曲線を描いています。

画像を使わずにもっとうまくやれるでしょうか？

そのため、CSS を使用して六角形の繰り返しパターンを作成する必要があります。画像が必要な場合はそこに行くこともできますが、可能であれば CSS のみを使用したいと考えています。

ここに私が作成しようとしているもののアイデアがあります:

基本的に、六角形を作成し、その上にテキスト/画像をオーバーレイする方法が必要です。どこから始めればよいかよくわからないので、まだ多くのコードを持っていません。問題は、 （ http://css-tricks.com/examples/ShapesOfCSS/<div> ）に示すように s を六角形の形で使用することもできますが、それらは接続されません。六角形の繰り返しパターンを使用することはできますが、特定の形状で必要なテキストまたは画像の正確な位置を指定することはできません。事前に助けてくれてありがとう。

隣接するdivのサイズを変更するjavascriptウィジェットを作成して、ユーザーがその上にカーソルを合わせたときにdivの背景画像をより多く表示します。これは十分に単純であり、（明らかに）まっすぐなエッジを持つdivでうまく機能します。ただし、境界エッジは「傾斜する必要があります」。

css3を使用して2つのDOM要素の間に傾斜した境界線を作成する簡単な方法はありますか？

私はcss3変換（つまり、スキュー）と対角線の境界線のトリック（半分の色、半分の透明度を使用）に出くわしましたが、どちらも私が必要とするものを達成できないようです。

私が達成しようとしている効果は、次の画像のようになります。

CSSでこの形状を構築しようとしています:

しかし、三角形の形状を右に向ける方法がわかりません(タグの「本体」に長方形があり、先端に三角形があることを考えると)。私は位置を扱っているので、タグのサイズがすべて異なる場合、長方形の直後に三角形を表示するにはどうすればよいでしょうか? 私はそれを解決することはできません。

フィドルを確認できます: http://jsfiddle.net/ExZFe/で、私が作成しているものと同様のタグを付けます。この例では位置だけを使用しているため、三角形に固定位置を指定しても意味がありません。私は :after で試しましたが、同じ理由で行き詰まりました。私は何が欠けていますか？前もって感謝します。

「逆円」と表現する形状を作成したいと思います。

黒い線がdiv要素の外側の境界に沿って続く必要があるため、画像はどういうわけか不正確です。

これが私が現在持っているもののデモです：http：//jsfiddle.net/n9fTF/

画像がなくてもそれは可能CSSですか？