Circular hole in a <div> [duplicate]

拜拜、爱过 提交于 2019-12-08 06:35:52

问题


I am looking for a way to create a square div of relative size, say, 70% x 70% with a background color and a circular hole in it (so that the background can be seen behind it) of the same size so that the sides of the div are tangent.


回答1:


You could use radial-gradient to achieve this.

html,
body {
  height: 100%;
  margin: 0;
  background: url(http://www.lorempixel.com/600/400) 100% 100%;
}
div {
  position: relative;
  width: 70%;
  height: 70%;
  background: -webkit-radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
  background: -moz-radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
  background: radial-gradient(50% 50%, circle, transparent 10%, #000 10%);
  margin: 0 auto;
}
<div></div>

Here's an svg approach.

body {
  background: url(http://www.lorempixel.com/600/400/);
  background-size: 100% 100%;
  margin: 0;
}
<svg viewBox="0 0 400 200" width="400" height="200">
  <path d="M0,0 L400,0 L400,200 L0,200z M200,100 m-50,0 a50,50 0 1,0 100,0 a50,50 0 1,0 -100,0z" fill="black" />
</svg>


来源:https://stackoverflow.com/questions/27574572/circular-hole-in-a-div

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!