Question

#diamond{
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: red;
}

<html>
  <body>
      <div id="diamond"></div>
  </body>
</html>

我正在尝试使用CSS创建菱形形状。但是，我要创建的钻石不是由直线组成，而是由四个略微凹陷的线组成，例如自行车卡。可以在css中凹入一条直线吗？

Answer 1

这是一个使用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

Answer 2

我认为，简单的<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">

如何用纯CSS使直线凹入

2 个答案: