Как мне создать круг или квадрат с только CSS - с полым центром?
-
26-09-2019 - |
Вопрос
Следует лишь в основном быть наброском квадрата или круга - то, что я могу соответственно стиль (то есть изменить цвет к тому, что я хочу, измените толщину границы и т. Д.)
Я хотел бы применить этот круг или квадрат над чем-то еще (как изображение или что-то), и средняя часть должна быть выдолблена, поэтому вы можете увидеть изображение под квадратом или кругом.
Я бы предпочел, чтобы это было в основном CSS + HTML.
Решение
Попробуй это
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>
Другие советы
Вы можете использовать специальные символы, чтобы сделать много форм. Примеры:http://jsfiddle.net/martlark/jwh2n/2/
<table>
<tr>
<td>hollow square</td>
<td>□</td>
</tr>
<tr>
<td>solid circle</td>
<td>•</td>
</tr>
<tr>
<td>open circle</td>
<td>๐</td>
</tr>
</table>
Еще гораздо больше можно найти: HTML специальные символы
Я не знаю простых CSS (стандартный стандарт 2.1) -ОНли для кругов, но для квадратов вы можете легко сделать:
.squared {
border: 2x solid black;
}
Затем используйте следующий HTML-код:
<img src="…" alt="an image " class="squared" />
Если вы хотите, чтобы ваш Div, чтобы сохранить его круговую форму, даже если вы измените его ширину / высоту (используя JS, например,), установите радиус до 50%. Пример: CSS:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
HTML:
<div class="circle"></div>
Время! :) Легкий способ сделать круг с полым центром: используйте границу-радиус, дайте элемент границы и без фона, чтобы вы могли видеть через него:
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>
Для моих знаний нет кросс-браузера, совместимый способ сделать круг только с CSS и HTML только.
Для площади, которую я думаю, вы можете сделать Div с границей и индекс Z выше, чем то, что вы вкладываете его. Я не понимаю, почему вам нужно будет сделать это, когда вы могли бы просто поставить границу на изображение или сам «что-то».
Если кто-то еще знает, как сделать круг, который является перекрестным браузером, совместимым только с CSS и HTML, я хотел бы услышать об этом!
@Caspar Kleijne пограничный радиус не работает в IE8 или ниже, не уверен, что около 9.
Вскоре после нахождения этих вопросов я нашел эти примеры на 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>
В приведенной выше ссылки есть много других примеров формы, но вам придется тестировать для совместимости браузера.