如何用纯 css 凹直线
How to concave a straight line with pure css
#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>
我相信一条简单的 <svg>
路径就是到达这里的方式。一个明显的优势是内联显示,作为一个普通字母:
注意 我添加了一些 JS 和幻灯片输入以允许动态更改字体大小。它们不是实际答案的一部分。
// js is not part of the answer
document.querySelector('input').addEventListener('input', function(e){
document.body.style.fontSize = this.value + 'em'
})
svg.diamond {
height: .75em;
}
body {
font-size: 9em;
font-family: serif;
color: red;
}
/* answer CSS ends here */
input {
position: absolute;
display: block;
text-align: center;
width: 60vw;
top: 0; left: 20vw;
}
5<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 360 480" style="enable-background:new 0 0 360 480;" xml:space="preserve"
class="diamond">
<path fill="currentColor" d="M180,0C133.3,94.3,72,175.9,0,240c72,64.1,133.3,145.7,180,240c46.7-94.3,108-175.9,180-240C288,175.9,226.7,94.3,180,0z"/>
</svg>
<!-- answer markup ends here -->
<input type="range" value="9" min="1" max="33" step=".01">
#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>
我相信一条简单的 <svg>
路径就是到达这里的方式。一个明显的优势是内联显示,作为一个普通字母:
注意 我添加了一些 JS 和幻灯片输入以允许动态更改字体大小。它们不是实际答案的一部分。
// js is not part of the answer
document.querySelector('input').addEventListener('input', function(e){
document.body.style.fontSize = this.value + 'em'
})
svg.diamond {
height: .75em;
}
body {
font-size: 9em;
font-family: serif;
color: red;
}
/* answer CSS ends here */
input {
position: absolute;
display: block;
text-align: center;
width: 60vw;
top: 0; left: 20vw;
}
5<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 360 480" style="enable-background:new 0 0 360 480;" xml:space="preserve"
class="diamond">
<path fill="currentColor" d="M180,0C133.3,94.3,72,175.9,0,240c72,64.1,133.3,145.7,180,240c46.7-94.3,108-175.9,180-240C288,175.9,226.7,94.3,180,0z"/>
</svg>
<!-- answer markup ends here -->
<input type="range" value="9" min="1" max="33" step=".01">