中空の中心で - どのように私は、CSSの円や正方形を作成するのですか？

Question

それはちょうど基本的には正方形や円形の輪郭であるべき - （。すなわちなど、ボーダーの太さを変更する、私は好きに色を変更する）、私はそれに応じてスタイルができていること。

私は（画像か何かのような）何か他のものの上にその円や四角を適用したいとあなたは、正方形または円の下の画像を見ることができるように、中央部には、くり抜かれなければならない。

それは主であるために、私は希望CSS + HTMLます。

Answer 1

このお試しください

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>

Answer 2

あなたは形状の多くを作るために特殊文字を使用することができます。例： 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>

他にも多くがここで見つけることができます： HTML特殊文字の

Answer 3

私は、単純なCSS（2.1規格）の円のためのみの溶液を知らないが、正方形のために、あなたが簡単に行うことができます：

.squared {
    border: 2x solid black;
}

そして、次のHTMLコードを使用します：

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

Answer 4

あなたのdivを維持したい場合、それはあなたが（例えば、JSを使用して）その幅/高さを変更した場合でも、円形だが50％に半径を設定します。例： CSSます：

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

HTMLます：

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

Answer 5

サークルタイム！ :)中空中心とする円を作る簡単な方法：あなたがそれを見ることができるように使用ボーダー半径は、要素に境界線と背景なしを与えます：

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>