纯 CSS - 使用 mask-image 和radial-gradient 制作菱形形状

Question

我正在尝试用纯 CSS 制作一些菱形形状，尝试使用 mask-image 和 Radial-gradient 但我不太成功。

我喜欢做的两种形式是：

我尝试了一些方法来改变一块黑色，比如

width: 20px;
height: 20px;
background: #000;
-webkit-mask-image: radial-gradient(circle 7px at top, transparent 7px, black 50%);

我不知道如何解决我的问题，即使只通过纯 CSS 也是可行的 :)

Answer 1

你在这里并不需要面具。多个radial-gradient()就可以了

.box {
  width:50px;
  height:50px;
  margin:10px;
  --c:transparent 90%,#000 92% 98%,transparent; /* adjust this */
  background:
    radial-gradient(farthest-side at top   left  ,var(--c)) top left,
    radial-gradient(farthest-side at top   right ,var(--c)) top right,
    radial-gradient(farthest-side at bottom left ,var(--c)) bottom left,
    radial-gradient(farthest-side at bottom right,var(--c)) bottom right;
  background-size:51% 51%; /* add this (each layer take half the height and width) */
  background-repeat:no-repeat;
} 

.alt {
  --c:transparent 90%,#000 92%; /* we simply remove the last transparent for the full shape */
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box alt"></div>

如果你想要一个花哨的背景，面具会很有用：

.box {
  width:50px;
  height:50px;
  margin:10px;
  background:linear-gradient(45deg,red,blue);
  --c:transparent 90%,#000 92% 98%,transparent; /* adjust this */
  -webkit-mask:
    radial-gradient(farthest-side at top   left  ,var(--c)) top left,
    radial-gradient(farthest-side at top   right ,var(--c)) top right,
    radial-gradient(farthest-side at bottom left ,var(--c)) bottom left,
    radial-gradient(farthest-side at bottom right,var(--c)) bottom right;
  -webkit-mask-size:51% 51%; /* add this (each layer take half the height and width) */
  -webkit-mask-repeat:no-repeat;
} 

.alt {
  --c:transparent 90%,#000 92%; /* we simply remove the last transparent for the full shape */
}

body {
  background:pink;
}

<div class="box"></div>

<div class="box alt"></div>