cssshapescss-shapes

Create a cross shape in CSS

IS it possible, I know all the following shapes are possible in this link:

http://css-tricks.com/examples/ShapesOfCSS/

but cross must be possible too. When I say cross I mean like this:

enter image description here

Solution

  • You could achieve something like this with multiple linear-gradients e.g.

    #cross {
  inline-size: 5rem;
  aspect-ratio: 1;
  --gradient: #d000 33.33%, #d00 0, #d00 66.66%, #d000 0;

  background: 
    linear-gradient(0, var(--gradient)),
    linear-gradient(90deg, var(--gradient));
}
    <div id="cross"></div>

    Or if you prefer you could use clip-path

    #cross {
  inline-size: 5rem;
  aspect-ratio: 1;
  background: #d00;
  clip-path: polygon(0 33.33%, 33.33% 33.33%, 33.33% 0, 66.66% 0, 
     66.66% 33.33%, 100% 33.33%, 100% 66.66%,
     66.66% 66.66%, 66.66% 100%, 33.33% 100%,
     33.33% 66.66%, 0 66.66%);
}
    <div id="cross"></div>