CSS/JS画像の丸い切り取り

Question

私のデザイナーは、私が複製できることを望んでいると私に見せてくれましたが、私はそうする方法はあまりよく分かりません。最初の部分は、アバターの円形トリミングある

• （それは正方形のアップロードです）
• 第二部は、吹き出し

である私は、バックエンドでの最初の部分をやっまで開いていますしかし、CSS/JSソリューションを持つ方が好きです。吹き出しの部分について

Answer 1

私はこのチュートリアルを示唆しています。 http://nicolasgallagher.com/pure-css-speech-bubbles/私は頻繁にアイデアやそれを自分で行う方法を学ぶために使用します。私はあなたにそれをする方法を学びたいので、私はあなたにチュートリアルを与えます。何か助けが必要なコードを私に渡したら、それを修正する方法の答えを教えてください。これについてのコードはまだありますか？

また、切り抜きのために、これを行う簡単な方法は、画像の周りに正方形のラッパーdivを作成し、その辺の長さの半分であるボーダー半径（css）を与えることです。オーバーフローを非表示に設定すると、設定されます。

乾杯！

Answer 2

円形画像の場合、CSSのborder-radiusを使用できます。丸みを帯びた角が触れるほど大きくしてください。

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

ルークの答えは、スピーチバブルのための良いものです：私はそれに基づいてバブルを作成しました。また、私の個人的なウェブサイトにいくつかの興味深い効果を創り出すために：beforeと：after CSS擬似要素を使って、この三角技術を適用しました。必要に応じて、境界線のように見えるように、もう一方よりも大きなものを配置することができます。

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