How to enlarge the arrow?

HTML & CSS
1

I’m trying to make this arrow bigger, but when I added width and height, it seemed to crop it horizontally, any help will be appreciated.

 div.select-arrow {
	border-top: 7px solid #ff6339;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	cursor: pointer;
	position: absolute;
	top: 29px;
	right: 60px;
	width: 5px;
	height: 5px;
	z-index: 7;
}

2

Hi ChrisjChrisj,

Do away with the width and height you added.

Then just change the border sizes to suit your needs.

Borders are laid out with mitered corners, that’s what is making the arrow. Along with the side borders being transparent.

div.select-arrow {
    border-top: 12px solid #ff6339;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    cursor: pointer;
    position: absolute;
    top: 29px;
    right: 60px;
    z-index: 7;

To show you how this is really working take a look at this following example.
The .arrow div is 1px wide and 40px tall, it has 30px borders that are different colors. (for the sharp pointed arrow in your case you need 0px width and height)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Border Arrow</title>
<style>
.arrow {
    border-top: 30px solid red;
    border-left: 30px solid yellow;
    border-right: 30px solid lime;
    border-bottom: 30px solid blue;
    position: absolute;
    top:80px;
    left:80px;
    width: 1px;
    height: 40px;
    background:#000;
}
</style>
</head>
<body>

<h1>Border Arrow</h1>
<div class="arrow"></div>

</body>
</html>
1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.