タグ付けされた質問 「css-shapes」

OverаэтотвопросестьответынаStack Overflowнарусском：CSSаксоздатьтреугольникиCSS？ CSS Tricks- CSSの形状にはたくさんの異なるCSS形状があり、私は特に三角形に戸惑っています。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> コードスニペットを実行する結果を非表示スニペットを展開 どのようにそしてなぜそれは機能しますか？

1846 css  geometry  polygon  css-shapes 

次のようなメニューを作成するにはどうすればよいですか。 PSDへのリンク PSD画像を使いたくない。FontAwesomeなどのパッケージのアイコンを使用し、CSSでbackgrounds / cssを生成することをお勧めします。 PSDを使用してツールチップのイメージを生成し、それを使用するメニューのバージョンは、こちらで確認できます。

321 css  tooltip  css-shapes 

この画像のように、数字を円で囲みます。 これは可能ですか？それはどのように達成されますか？

250 html  css  css-shapes 

中心的な単語が1つあるWebページが欲しい。 この単語をアニメーションで描画して、ページが同じように単語を「書き出す」ようにします。つまり、ある時点から始まり、最終的な結果がグリフになるように時間とともに線と曲線を描画します。 これが<canvas>DOMで行われるかどうかは気にせず、JavaScriptとCSSのどちらで行われるかは気にしません。jQueryがないことは良いことですが、必須ではありません。 これどうやってするの？私は運が悪くて徹底的に検索しました。

229 javascript  css  canvas  html5-canvas  css-shapes 

このような形状を作成してWebページに表示するにはどうすればよいですか？ スケーリングでぼやけてしまうので、画像は 使いたくない 私はCSSで試しました： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> コードスニペットを実行する結果を非表示スニペットを展開 それは本当に台無しになりました。 そして、私はSVGで試しました： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> コードスニペットを実行する結果を非表示スニペットを展開 形は取れましたが、底が曲がっていませんでした。 HTMLページで使用できるようにこの形状を作成する方法はありますか？

222 html  css  svg  css-shapes 

これはCSSです： div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } 下の円はどのように生成されますか？ 長方形の幅が180ピクセルで高さが180ピクセルの場合、次のように表示されます。 ボーダー半径30ピクセルを適用すると、次のようになります。 長方形は小さくなり、半径のサイズが大きくなるとほとんど見えなくなります。 では、180ピクセルの境界線はどのようにしheight/width-> 0pxて半径180ピクセルの円になるのでしょうか。

206 html  css  css-shapes 

現在行っている方法よりも簡単に循環divを作成する方法があるかどうか疑問に思っています。 現在、サイズごとに画像を作っているところですが、これは面倒です。 とにかくCSSを使用して円形のdivを作成し、半径を指定できますか？

183 html  css  geometry  css-shapes 

私はこの例をstackoverflowで見つけました： CSSのみを使用して円を描く それは素晴らしいです。しかし、円の中央にテキストを含めることができるようにその例を変更する方法を知りたいですか？ 私はこれも見つけました： CSSで円のテキストを垂直方向と水平方向に中央揃えにします（iPhone通知バッジのように） しかし、何らかの理由で、それは私にとってはうまくいきません。次のテストコードを作成すると、 <div class="badge">1</div> 円ではなく楕円形になります。私はコードをいじって、どのように機能させるかを確認しようとしています。

155 css  css-shapes 

CSSで破線の境界線の長さと距離を制御することはできますか？ 以下の例は、ブラウザによって表示が異なります。 div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> コードスニペットを実行するHide resultsスニペットを展開 大きな違い：IE 11 / Firefox / Chrome 破線の境界線の外観をより詳細に制御できる方法はありますか？

124 css  border  css-shapes 

border-radiusにピクセル値またはem値を使用する場合、値が要素の最大の辺より大きい場合でも、エッジの半径は常に円弧または丸薬の形状になります。 パーセンテージを使用すると、エッジの半径は楕円形になり、要素の各辺の中央から始まり、楕円または楕円形になります。 border-radiusのピクセル値： コードスニペットを表示 div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> コードスニペットを実行する結果を非表示スニペットを展開 border-radiusのパーセント値： コードスニペットを表示 div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> コードスニペットを実行する結果を非表示スニペットを展開 パーセンテージで表した境界半径が、ピクセルまたはem値で設定された境界半径と同じように機能しないのはなぜですか？

124 css  css-shapes 

HTML5とCSS3を使用して円をどのように描画しますか？ テキストを中に入れることも可能ですか？

116 html  css  geometry  css-shapes 

CSSの三角形（境界線）にカスタムの16進数の色を使用しようとしています。ただし、ボーダープロパティを使用しているため、これをどのように行うかわかりません。互換性のために、javascriptとcss3を避けたいと思います。三角形の背景を白にし、1pxの境界線（三角形の斜めの辺の周り）に＃CAD5E0の色を付けます。これは可能ですか？ここに私がこれまで持っているものがあります： .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: 100%; width: 0; height: 0; border-color: transparent transparent transparent #CAD5E0; border-style: solid; border-width: 10px; }​ 私のフィドル：http : //jsfiddle.net/4ZeCz/

114 css  border  css-shapes 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 5年前休業。 この質問を改善する 私はこのWebサイトを検索してプログレスバーを見つけましたが、見つけたものは100％に達するアニメーションサークルを示しています。 下のスクリーンショットのように、特定の割合で停止したいと思います。CSSだけを使用してそれを行う方法はありますか？

112 html  css  progress-bar  progress  css-shapes 

わかりましたので、これを使用して三角形を作成できることを誰もが知っています： #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } そして、それは三角形で塗りつぶされた固体を生成します。しかし、このように中空の矢印のような三角形をどのように作成しますか？

102 html  css  css-shapes 

CSSを使用して、次の画像のような背景効果から透明なテキストを切り取る方法はありますか？ テキストに代わる画像のために、すべての貴重なSEOを失うのは悲しいことです。 最初は影のことを考えましたが、何もわかりません... 画像はサイトの背景、絶対配置<img>タグです

90 css  svg  fonts  css-shapes