#diamond{
width: 40px;
height: 40px;
transform: rotate(45deg);
background: red;
}
<html>
<body>
<div id="diamond"></div>
</body>
</html>
我正在尝试用 css 创建一个菱形。然而，我想要创建的菱形不是由直线组成的，而是由四条略凹的线条组成，就像自行车卡一样。 css中可以凹一条直线吗？
这是一个使用的想法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 http://jxnblk.com/paths/?d=M0%2032%20C20%2044%2020%2044%2032%2064%20C44%2044%2044%2044%2064%2032%20C44%2020%2044%2020%2032%200%20C20%2020%2020%2020%200%2032%20Z
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
