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

Question

我正在尝试制作一些纯粹的菱形 CSS，尝试使用掩码图像和径向渐变，但我不太成功。

我喜欢做的 2 种形式是：

我试过一些东西来改变一块黑色，比如

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>

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

Pure CSS - Using mask-image and radial-gradient to make diamond like form

css

radial-gradients