我正在尝试创建一个css类,该类将掩盖一个方形div或其他方形元素,以便您只能在div中看到具有给定内容的圆。我希望圆完全填充div,以便四个侧面相切。唯一的窍门是div或元素为正方形,因为元素需要保持可伸缩性。例如:元素的高度和都可能是50%,而不是50px。我还试图使div集中在页面上,这也证明是非常具有挑战性的。

这是我一直在努力的代码:

.circlemask{
 margin-left: auto;
 margin-right: auto;
 margin-top:auto;
 margin-bottom:auto;
 mask: url("img/circle.svg");
 -webkit-mask-box-image: url("img/circle.svg");
 -webkit-mask-size: 100% 100%;
}

<div class="circlemask" height="70% width="70%"></div>


该代码包含一个circle.svg文件的链接:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse">
      <circle id="circle" cx="240" cy="135" r="135" fill="white"/>
    </mask>
  </defs>
  <use xlink:href="#circle"/>
</svg>


我想可能有一种方法可以在没有单独的svg文件的情况下执行此操作。

如果您有任何建议/答案,我希望能听到。
如果证明不可能,我想听听其他方法。

谢谢!

最佳答案

最简单的方法就是使用border-radius

.circlemask {
   border-radius: 50%;
}


无需使用SVG。

09-10 02:42
查看更多