0

My project requires a rectangle box with a red diamond inside it, like the image below. I'm not sure if I need to use an image to achieve this, or pure CSS, or an SVG? I'd rather not use an image but i'm not sure how to achieve it with CSS or an SVG?

The rectangles CSS

.rectangle {
  width: 98px;
  height: 45px;
  border: 1px solid white;
  display: inline-block;
  position: relative;
  border-bottom: 2px solid white;
}

What I need (made in paint.net)

enter image description here

Oblivion
  • 585
  • 2
  • 8
  • 26
  • Please include some HTML in a working snippet. CSS means nothing without it. – isherwood Nov 11 '21 at 17:45
  • 2
    See https://css-tricks.com/the-shapes-of-css/#diamond-narrow-shape-via-joseph-silber – isherwood Nov 11 '21 at 17:45
  • Investigate clip-path - perhaps on a pseudo element with a red background. You can get a lot of control that way and without needing to add extra elements like SVG or divs. – A Haworth Nov 11 '21 at 18:33

0 Answers0