Breaking News: Grepper is joining You.com. Read the official announcement!

border bottom arrow css

YOU.com answered on October 20, 2022 Popularity 7/10 Helpfulness 5/10

answer border bottom arrow css

related border bottom with down arrow

border bottom arrow css

Comment

.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

Popularity 7/10 Helpfulness 5/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

border bottom with down arrow

Comment

* {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>

Popularity 6/10 Helpfulness 2/10 Language css

Source: stackoverflow.com

Tags: border css

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Andomi

0 Answers Avg Quality 2/10

border bottom with down arrow

Comment

* {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;}

Popularity 6/10 Helpfulness 2/10 Language css

Source: stackoverflow.com

Tags: border css

Link to this answer
Share Copy Link

Contributed on Oct 20 2022

Andomi

0 Answers Avg Quality 2/10

border bottom arrow css

Contents

More Related Answers

border bottom arrow css

Closely Related Answers

border bottom with down arrow

border bottom with down arrow

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.