Html 如何仅使用 CSS 创建一个圆形或方形 - 中心为空心？

How do I create a circle or square with just CSS - with a hollow center?

提问by marcamillion

It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.)

它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式（即，将颜色更改为我想要的任何颜色，更改边框的厚度等）

I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle.

我想将该圆形或正方形应用于其他东西（例如图像或其他东西），中间部分应该被挖空，以便您可以看到正方形或圆形下方的图像。

I would prefer for it to be mainly CSS + HTML.

我希望它主要是 CSS + HTML。

回答by Caspar Kleijne

Try This

尝试这个

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>

More here

更多在这里

回答by Martlark

You can use special characters to make lots of shapes. Examples: http://jsfiddle.net/martlark/jWh2N/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>

Many more can be found here: HTML Special Characters

更多内容可以在这里找到：HTML 特殊字符

回答by nakhli

If you want your div to keep it's circular shape even if you change its width/height (using js for instance) set the radius to 50%. Example: css:

如果您希望 div 保持圆形，即使您更改其宽度/高度（例如使用 js），请将半径设置为 50%。示例： css:

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

html:

html：

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

回答by knittl

i don't know of a simple css(2.1 standard)-only solution for circles, but for squares you can do easily:

我不知道一个简单的 css(2.1 标准)-only 圆形解决方案，但对于正方形，您可以轻松做到：

.squared {
    border: 2x solid black;
}

then, use the following html code:

然后，使用以下 html 代码：

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

回答by coven

Circle Time! :) Easy way of making a circle with a hollow center : use border-radius, give the element a border and no background so you can see through it :

循环时间！:) 制作一个空心圆的简单方法：使用边框半径，给元素一个边框，没有背景，这样你就可以看穿它：

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>

回答by Ammi J Embry

To my knowledge there is no cross-browser compatible way to make a circle with CSS & HTML only.

据我所知，没有跨浏览器兼容的方法可以仅使用 CSS 和 HTML 制作圆圈。

For the square I guess you could make a div with a border and a z-index higher than what you are putting it over. I don't understand why you would need to do this, when you could just put a border on the image or "something" itself.

对于正方形，我想您可以制作一个带有边框和 z-index 的 div 高于您放置的内容。我不明白为什么你需要这样做，当你可以在图像或“某物”本身上放置一个边框时。

If anyone else knows how to make a circle that is cross browser compatible with CSS & HTML only, I would love to hear about it!

如果其他人知道如何制作一个仅与 CSS 和 HTML 兼容的跨浏览器的圆圈，我很想听听！

@Caspar Kleijne border-radius does not work in IE8 or below, not sure about 9.

@Caspar Kleijne border-radius 在 IE8 或更低版本中不起作用，不确定是否为 9。

回答by CatShoes

Shortly after finding this questions I found these examples on CSS Tricks: http://css-tricks.com/examples/ShapesOfCSS/

在找到这个问题后不久，我在 CSS Tricks 上找到了这些例子：http: //css-tricks.com/examples/ShapesOfCSS/

Copied so you don't have to click

已复制，因此您无需单击

.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>

There are many other shape examples in the above link, but you will have to test for browser compatibility.

上述链接中还有许多其他形状示例，但您必须测试浏览器兼容性。

回答by CodingGeek

In case of circle all you need is one div, but in case of hollow square you need to have 2 divs. The divs are having a display of inline-blockwhich you can change accordingly. Live Codepen link: Click Me

在圆形的情况下，您只需要一个 div，但在空心正方形的情况下，您需要有 2 个 div。div 显示内联块，您可以相应地更改。Live Codepen 链接：点击我

In case of circle all you need to change is the borderproperties and the dimensions(width and height) of circle. If you want to change color just change the border color of hollow-circle.

在圆形的情况下，您需要更改的是圆形的边框属性和尺寸（宽度和高度）。如果要更改颜色，只需更改空心圆的边框颜色即可。

In case of the square background-colorproperty needs to be changed depending upon the background of page or the element upon which you want to place the hollow-square. Always keep the inner-circledimension small as compared to the hollow-square. If you want to change color just change the background-color of hollow-square. The inner-circleis centered upon the hollow-squareusing the position, top, left, transform propertiesjust don't mess with them.

如果需要根据页面背景或要放置空心正方形的元素更改正方形背景颜色属性。与空心正方形相比，始终保持内圆尺寸较小。如果您想更改颜色，只需更改empty-square的 background-color 。的内圆被在所述中心空心正方形使用位置时，上，左，转换属性，只是不乱用它们。

Code is as follows:

代码如下：

/* CSS Code */

.hollow-circle {
  width: 4rem;
  height: 4rem;
  background-color: transparent;
  border-radius: 50%;
  display: inline-block;
  
  /* Use this */
  border-color: black;
  border-width: 5px;
  border-style: solid;
  /* or */
  /* Shorthand Property */
  /* border: 5px solid #000; */
}

.hollow-square {
  position: relative;
  width: 4rem;
  height: 4rem;
  display: inline-block;
  background-color: black;
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: white;
}

<!-- HTML Code -->

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

<br/><br/><br/>

<div class="hollow-square">
  <div class="inner-circle"></div>
</div>