时间戳

首页 > 解决方案 > 如何用纯css凹出一条直线

css - 如何用纯css凹出一条直线

问题描述

在此处输入图像描述 

#diamond{
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: red;
}
<html>
  <body>
      <div id="diamond"></div>
  </body>
</html>

我正在尝试用css创建一个菱形。但是，我要创建的菱形不是由直线组成，而是由四条微凹的线组成，就像自行车卡一样。是否可以在css中凹出一条直线？

标签： csscss-shapes

解决方案

这是一个使用radial-gradient但没有透明度的想法：

#diamond {
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: 
    radial-gradient(circle at -220% 50%, #fff 70%,transparent 71%),
    radial-gradient(circle at 320% 50%, #fff 70%,transparent 71%),
    radial-gradient(circle at 50% 320% , #fff 70%,transparent 71%),
    radial-gradient(circle at 50% -220% , #fff 70%,transparent 71%),
    linear-gradient(red,red) content-box;
  padding:1px;
  margin:20px;
}
<div id="diamond"></div>

您也可以使用 SVG 轻松做到这一点：

svg {
  margin:20px;
  width:70px;
}
<svg
  xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 64 64'
  fill='red'>
  <path d='M0 32 
          C20 44 20 44 32 64 
          C44 44 44 44 64 32 
          C44 20 44 20 32 0 
          C20 20 20 20 0 32 Z' />
</svg>

要编辑形状：http://jxnblk.com/paths/?d=M0 32 C20 44 20 44 32 64 C44 44 44 44 64 32 C44 20 44 20 32 0 C20 20 20 20 0 32 Z

推荐阅读