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

Question

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

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

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

Answer 1

Попробуйте

1002 *

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

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

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

html:

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

Answer 4

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

.squared {
    border: 2x solid black;
}

затем используйте следующий HTML-код:

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

Answer 5

Время круга! :) Простой способ сделать круг с полым центром: используйте 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>

Answer 6

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

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

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

@ Caspar Kleijne border-radius не работает в IE8 или ниже, не уверен насчет 9.

Answer 7

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

В приведенной выше ссылке есть много других примеров фигур, но вам придется проверить совместимость браузера.