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

问题描述

我正在尝试用纯 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 就可以实现 :)

解决方法

你在这里真的不需要面具。多个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%,transparent; /* adjust this */
  -webkit-mask:
    radial-gradient(farthest-side at top   left,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>