increase the size of triangle - html

Question

I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.

Answer 1

You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>

Answer 2

You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>