border with down arrow using css - css

Question

I have a requirement like below.
I am able to go through https://css-tricks.com/snippets/css/css-triangle/ website and generate triangle. I want to know how to attach it to a border and get the desired dimension of height 10px and width of 40px.

Answer 1

You need to make the position: relative; of the parent div and position: absolute; of the child div in which you want to make the arrow.
Main thing by which the arrows are made is transform property.
It is working properly. But here the size of the arrow is just 2x that you want.
* {box-sizing: border-box;}
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;}
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 20px; width: 80px; z-index: 2; background-color: #fff;}
.arrow .pin {width: calc(50% + 5px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;}
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}
<div class="line">
<div class="arrow">
<div class="pin">
</div>
<div class="pin">
</div>
</div>
</div>
And it is with 40px x 10px size of arrow.
* {box-sizing: border-box;}
.line {height: 20px; border-bottom: solid 2px #000; margin-top: 100px; position: relative; z-index: 1;}
.arrow {content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); height: 10px; width: 40px; z-index: 2; background-color: #fff;}
.arrow .pin {width: calc(50% + 3px); height: 2px; background: #000; display: inline-block; float: left; transform: rotate(25deg); transform-origin: 0 0;}
.arrow .pin:last-child {transform: rotate(-25deg); transform-origin: 100% 0; float: right; margin-top: -2px;}
<div class="line">
<div class="arrow">
<div class="pin">
</div>
<div class="pin">
</div>
</div>
</div>

Answer 2

That's pretty straightforward.
Step 1: You give the position: relative; property for the div to which you want to add the arrow.
Step 2: add the CSS arrow: <div class="arrow-down"></div> And apply a position: absolute; property to it so that you could position it as required.
So, if you had a div with the class box, this is what you would do:
.box {
width: 200px;
height: 150px;
background-color:red;
margin: 30px auto;
position: relative;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid #f00;
position: absolute;
bottom: -10px;
left: 80px;
}
<div class="box">
<div class="arrow-down"></div>
</div>
Here's a fiddle for the same: https://jsfiddle.net/t2ne282z/