如何用纯CSS使直线凹入 [英] How to concave a straight line with pure css
本文介绍了如何用纯CSS使直线凹入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
#diamond{
width: 40px;
height: 40px;
transform: rotate(45deg);
background: red;
}
<html>
<body>
<div id="diamond"></div>
</body>
</html>
我是试图用css创建菱形。但是，我要创建的钻石不是由直线组成，而是由四个略微凹陷的线组成，例如自行车卡。
I'm trying to create a diamond shape with css. However, the diamond that I want to create is not made up of straight lines, but four slightly concave lines, like the bicycle cards. Is it possible to concave a straight line in 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>
To edit the shape : 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
这篇关于如何用纯CSS使直线凹入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
