Solution 1 :

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.

Solution 2 :

Use this –

      .steps {
  padding-left: 0;
  list-style: none;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 12px;
  line-height: 1;
  margin: 30px auto;
  border-radius: 3px;
}

.steps strong {
  font-size: 14px;
  display: block;
  line-height: 1.4;
}

.steps>li {
  position: relative;
  display: block;
  /* border: 1px solid #ddd; */
  padding: 12px 50px 8px 50px; 
  width: 140px;
  height: 40px;
}

@media (min-width: 768px) {
  .steps>li { float: left; }
  .steps .past { color: #666; background: #ececec; }
  .steps .present { color: #000; }
  .steps .future { color: #777; background: #efefef; }

  .steps li > span:after,
  .steps li > span:before {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: #f0f0f0;
    border-width: 30px;
  }

  .steps li > span:after {
    top: -5px;
    z-index: 1;
    border-left-color: white;
    border-width: 34px;
  }

  .steps li > span:before { z-index: 2; }

  .steps li.past + li > span:before { border-left-color: #ececec; }
  .steps li.present + li > span:before { border-left-color: #fff; }
  .steps li.future + li > span:before { border-left-color: #efefef; }

  .steps li:first-child > span:after,
  .steps li:first-child > span:before { display: none; }

  /* Arrows at start and end */
  .steps li:first-child i,
  .steps li:last-child i {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border: solid transparent;
    border-left-color: white;
    border-width: 30px;
  }

  .steps li:last-child i {
    left: auto;
    right: -30px;
    border-left-color: transparent;
    border-top-color: white;
    border-bottom-color: white;
  }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <ul class="steps">
        <li class="past">
          <span>
            <strong>Step 1</strong>
            Blah blah blah.
          </span><i></i>
        </li>
        <li class="present">
          <span>
            <strong>Step 2</strong>
            Blah blah blah.
          </span><i></i>
        </li>
        <li class="future">
          <span>
            <strong>Step 3</strong>
            Blah blah blah.
          </span><i></i>
        </li>
      </ul>
</body>
</html>

Problem :

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.

enter image description here

  1. 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

  2. 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,

Comments

Comment posted by C├ędric

The fastest answer would be to use a scss to css converter.

By esgsw

Leave a Reply

Your email address will not be published. Required fields are marked *