Create a rectangle with a pointer? [duplicate] - html

Question

This question already has an answer here:
Breadcrumb Chevrons CSS
(1 answer)
Closed 10 months ago.
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,

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

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