Create a rectangle with a pointer?

April 28, 2022

Is there a way to create this in HMTL & CSS? I’ve been trying for a few hours now and I can’t seem to get anywhere close to it.

I saw this example but it used SCSS and I can’t use it for this
project I’m working on. https://codepen.io/gditoro/pen/oNzrJeV

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.
Visit Medevel
I also saw this but when I applied it to my div only the width
height and background color changed.

https://css-tricks.com/the-shapes-of-css/#aa-pointer-via-amsakanna-alt

HTML

<div class="steps">
        Pin Check
        
    </div>

CSS

.steps {
    width: 200px;
    height: 40px;
    position: relative;
    background: red;
  }
  #steps:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid white;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }
  #steps:before {
    content: "";
    position: absolute;
    right: -20px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 20px solid red;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
  }

Thank you,

>Solution :

There’s nothing very magic about SCSS, it just translates some stuff into pure CSS before you run.

So, if you run that first codepen and use the browser devtools you can copy the CSS and the HTML and try that.

This is what I got:

.pointer .text-content p {
  text-align: center;
}

p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.pointer .text-content {
  display: inline-block;
  position: relative;
  top: calc(0.25em* -0.5);
  left: calc(0.25em* 2.5);
  min-width: calc(0.25em* 28);
  min-height: calc(0.25em* 17);
  margin-right: calc(0.25em* 4);
  vertical-align: middle;
  color: #ffffff;
}

.pointer {
  display: inline-block;
  font-size: 16px;
  padding-left: calc(0.25em*5);
  padding-right: calc(0.25em*5);
  padding-top: calc(0.25em*2);
  padding-bottom: calc(0.25em*2);
  height: calc(0.25em*16);
  position: relative;
  background: #777777;
  max-width: calc(0.25em*32);
  min-width: calc(0.25em*12);
  -webkit-clip-path: polygon(calc(0.25em* 42 * 0.85) 0, calc(0.25em* 42) 50%, calc(0.25em* 42 * 0.85) 100%, 0% 100%, calc(0.25em* 32 * 0.15) 50%, 0% 0%);
  clip-path: polygon(calc(0.25em* 42 * 0.85) 0, calc(0.25em* 42) 50%, calc(0.25em* 42 * 0.85) 100%, 0% 100%, calc(0.25em* 32 * 0.15) 50%, 0% 0%);
}

<div class="pointer">
  <div class="text-content">
    <p>L</p>
  </div>
</div>
<div class="pointer">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>
<div class="pointer">
  <div class="text-content">
    <p>Lorem ipsum dolor sit amet</p>
  </div>
</div>

Obviously you’ll want to look at the actual dimensions to suit your use case but this at least gives a basic start.