web-dev-qa-db-ja.com

CSSだけで円または正方形を作成するにはどうすればよいですか？

それは基本的に正方形または円の輪郭である必要があります-それに応じてスタイルを付けることができます（つまり、色を好きなように変更したり、境界線の太さを変更したりなど）

その円または正方形を他の何か（画像など）に適用し、中央部分をくり抜いて、正方形または円の下に画像が見えるようにします。

私はそれが主にCSS + HTMLであることを好むでしょう。

htmlcssgeometrycss-shapes
39
marcamillion

これを試して

div.circle {
  -moz-border-radius: 50px/50px;
  -webkit-border-radius: 50px 50px;
  border-radius: 50px/50px;
  border: solid 21px #f00;
  width: 50px;
  height: 50px;
}

div.square {
  border: solid 21px #f0f;
  width: 50px;
  height: 50px;
}
<div class="circle">
  <img/>
</div>
 <hr/>
<div class="square">
  <img/>
</div>

詳細はこちら

51
Caspar Kleijne

特殊文字を使用して、多くの形状を作成できます。例： http://jsfiddle.net/martlark/jWh2N/2/

<table>
  <tr>
    <td>hollow square</td>
    <td>&#9633;</td>
  </tr>
  <tr>
    <td>solid circle</td>
    <td>&bull;</td>
  </tr>
  <tr>
    <td>open circle</td>
    <td>&#3664;</td>
  </tr>

</table>

enter image description here

さらに多くはここにあります： HTML特殊文字

16
Martlark

私は円のための単純なCSS（2.1標準）のみの解決策を知りませんが、正方形のためにあなたは簡単に行うことができます：

.squared {
    border: 2x solid black;
}

次に、次のHTMLコードを使用します。

<img src="…" alt="an image " class="squared" />
7
knittl

Divの幅/高さを変更しても（たとえばjsを使用して）divを円形に保ちたい場合は、半径を50％に設定します。例：css：

.circle {
    border-radius: 50%/50%; 
    width: 50px;
    height: 50px;
    background: black;
}

html：

<div class="circle"></div>
7
nakhli

サークルタイム！ :)中空の中心を持つ円を簡単に作成する方法：border-radiusを使用し、要素に境界線を付け、背景がないようにしてください。

div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    border-radius: 100%;
    width:100px;
    border:solid black 2px;
}

body{
    background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');
    background-size:cover;
}
<div></div>
5
coven

私の知る限りでは、CSSとHTMLのみでサークルを作成するためのクロスブラウザ互換の方法はありません。

正方形については、境界線とZインデックスが上にあるものよりも高いdivを作成できると思います。画像または「何か」自体にボーダーを付けることができるのに、なぜこれを行う必要があるのか​​わかりません。

CSSとHTMLのみに対応するクロスブラウザーのサークルを作成する方法を他の誰かが知っているなら、私はそれを聞きたいです！

@Caspar Kleijne border-radiusはIE8以前では動作しません。9についてはわかりません。

3
Ammi J Embry

この質問を見つけてまもなく、CSSトリックでこれらの例を見つけました： http://css-tricks.com/examples/ShapesOfCSS/

コピーしたので、クリックする必要はありません

.square {
  width: 100px;
  height: 100px;
  background: red;
}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}
/* Cleaner, but slightly less support: use "50%" as value */
<div class="square"></div>
<div class="circle"></div>

上記のリンクには他にも多くの形状の例がありますが、ブラウザの互換性をテストする必要があります。

1
CatShoes