Как создать круг или квадрат с помощью только CSS - с полым центром?

Он должен быть просто в основном контуром квадрата или круга - что я могу соответствующим образом изменить (т.е. изменить цвет на то, что я хочу, изменить толщину границы и т.д.)

Я хотел бы применить этот круг или квадрат над чем-то другим (например, изображение или что-то еще), а средняя часть должна быть выдолблена, чтобы вы могли видеть изображение под квадратом или кругом.

Я бы предпочел, чтобы он был в основном CSS + HTML.

Ответ 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>

Ответ 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>

Ответ 3

Я не знаю простого css (стандартного стандарта 2.1) - единственное решение для кругов, но для квадратов вы можете легко:

.squared {
    border: 2x solid black;
}

то используйте следующий код html:

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

Ответ 4

Если вы хотите, чтобы ваш div сохранял свою круговую форму, даже если вы изменили его ширину/высоту (например, с помощью js), установите радиус на 50%. Пример: CSS:

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

HTML:

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

Ответ 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>

Ответ 6

Насколько мне известно, не существует совместимого с кросс-браузером способа создания круга только с CSS и HTML.

Для квадрата, я думаю, вы могли бы сделать div с границей и z-индексом выше, чем вы его положили. Я не понимаю, зачем вам это нужно, когда вы можете просто поместить границу на изображение или "что-то".

Если кто-то еще знает, как сделать круг, который является кросс-браузером, совместимым только с CSS и HTML, я хотел бы услышать об этом!

@border-radiusCaspar Kleijne не работает в IE8 или ниже, не уверен около 9.

Ответ 7

Вскоре после нахождения этих вопросов я нашел эти примеры в 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>