CODEWITHSUNDEEP
css
Hacker
Hacker

Reputation: 7896

border with down arrow using css

I have a requirement like below. enter image description here

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.

Upvotes: 0

Views: 7874

Answers (2)

Ashil John
Ashil John

Reputation: 7742

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/

Upvotes: 1

Rohit Sharma
Rohit Sharma

Reputation: 3334

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>

Upvotes: 1

Related Questions