5

私のデザイナーは、私が複製できるようにしたい外観を渡してくれましたが、どうすればよいかわかりません.

  • 最初の部分は、アバターの円形のトリミングです (正方形のアップロードです)
  • 2番目の部分は吹き出しです

バックエンドで最初の部分を行うことにオープンですが、CSS/JS ソリューションを使用することを好みます。

ここに画像の説明を入力

4

2 に答える 2

12

円形の画像の場合は、CSS の border-radius を使用できます。丸みを帯びた角が接触するように十分な大きさにします。

.profile-img {
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

ルークの答えは吹き出しに適しています。吹き出しに基づいて吹き出しを作成しました。また、CSS の :before および :after 疑似要素を使用してこの三角形の手法を適用し、個人の Web サイトで興味深い効果を作成しました。必要に応じて、一方を他方よりも大きく配置して、境界線のように見せることができます。

http://css-tricks.com/snippets/css/css-triangle/

于 2012-04-06T03:20:34.993 に答える
7

吹き出しの部分については、このチュートリアルをお勧めします。http://nicolasgallagher.com/pure-css-speech-bubbles/アイデアや自分でそれを行う方法を学ぶためによく使用します。その方法を学んでもらいたいので、チュートリアルを提供します。助けが必要なコードを教えてくれたら、それを修正する方法について答えます。これに対するコードはまだありますか？

また、トリミングについては、これを行う簡単な方法は、画像の周りに正方形のラッパー div を作成し、辺の 1 つの長さの半分である境界半径 (css) を与えることだと思います。オーバーフローを非表示に設定すれば完了です。

乾杯！

于 2012-04-06T03:12:07.107 に答える