How to control CSS arrow size - html

Question

I created an arrow in CSS. Everything is working as it should except the size of the arrow. I am not sure how I can make it smaller.
How can I make the arrow smaller?
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
}
#arrow {
margin-top: 10px;
border: solid #FFF;
border-width: 0 3px 3px 0;
display: block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<section id="blue">
<div id="box2">
<span id="box2Text">View Services</span>
<div id="arrow"></div>
</div>
</section>
Desired output:

Answer 1

Use the arrow as a pseudo element of the text div and you can easily place it and adjust its size:
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
position:relative;
}
#box2Text:after {
content:"";
left:calc(50% - 5px);
margin-top:40px;
position:absolute;
border: solid #FFF;
border-width: 0 3px 3px 0;
width:10px;
height:10px;
transform: rotate(45deg);
}
<section id="blue">
<div id="box2">
<span id="box2Text">View Services</span>
</div>
</section>

Answer 2

You just need to specify CSS width and height attributes to #arrow. you might need to adjust the arrow position after that according to your needs
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
}
#arrow {
margin-top: 10px;
border: solid #FFF;
border-width: 0 3px 3px 0;
display: block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 5px;
height: 5px;
}
<section id="blue">
<div id="box2">
<span id="box2Text">View Services</span>
<div id="arrow"></div>
</div>
</section>

Answer 3

Like this?
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
}
#arrow {
margin-right:15px;
margin-bottom:5px;
border: solid #FFF;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
width: 5px;
height: 5px;
}
<section id="blue">
<div id="box2">
<span id="box2Text"><div id="arrow"></div><span>View Services</span></span>
</div>
</section>