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

下の画像のように、片側のみ（たとえば、下側）に傾斜したエッジがあり、他のエッジはまっすぐな形状を作成しようとしています。 borderメソッド（コードは以下に示す）を使用してみましたが、形状の寸法が動的であるため、このメソッドを使用できません。 .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { position: absolute; content: ''; height: 0px; width: 0px; left: 0px; bottom: -100px; border-width: 50px 100px; border-style: solid; border-color: tomato tomato transparent transparent; } <div class="shape"> Some content </div> コードスニペットを実行する結果を非表示スニペットを展開 背景にグラデーションを使用してみました（以下のコードのように）が、寸法が変わるとめちゃくちゃになります。下のスニペットの形にカーソルを合わせると、私が何を意味するかがわかります。 コードスニペットを表示 .gradient { display: inline-block; …

90 html  css  responsive-design  css-shapes 

私はCSSの巧妙なトリックに出くわしました。フィドルをチェック... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png); display: block; height: 29px; width: 30px; } <div>Cool Trick: <br /> <div class="tooltiptail"></div> </div> <br /> <div>How do I get this effect with only CSS? <br /> …

89 css  tooltip  css-shapes 

この画像をCSSで再作成しようとしています。 繰り返す必要はありません。これは私が始めたものですが、直線があります： #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> コードスニペットを実行する結果を非表示スニペットを展開

80 css  css-shapes