#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>关于css - 如何用纯css凹出一条直线，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52920418/