Как мне создать круг или квадрат с только 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>

Answer 6

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

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

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

@Caspar Kleijne пограничный радиус не работает в IE8 или ниже, не уверен, что около 9.

Answer 7

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

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