Search code examples
csscss-shapes

How to concave a straight line with pure css

enter image description here 

#diamond{
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  background: red;
}
<html>
  <body>
      <div id="diamond"></div>
  </body>
</html>

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?

Solution

  • Here is an idea using radial-gradient but without transparency:

    #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>

    You can also easily do this with 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