[ANSWERED] Create a rectangle with a pointer?

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

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

Question 3

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

Bollate

[ANSWERED] Create a rectangle with a pointer?

Byesgsw

Solution 1 :

Solution 2 :

Problem :

Comments

Comment posted by Cédric

By esgsw

Related Post

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

[ANSWERED] html – How to include a clickable image behind a link

[ANSWERED] html – Move list item to the left in header/navigation menu

Leave a Reply Cancel reply

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate