css transparent triangle with border - css

Question

Is it possible to style(skew) triangle like on the picture on the right side?
http://s15.postimg.org/h2vruavmz/triangle.jpg
I want to skew it, make background transparency 0.5 and hide bottom border of the triangle.
body {
background-color: #ccc;
}
.arrow_box {
position: absolute;
top: 40px;
left: 40px;
background: #fff;
/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -20px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #000;
border-width: 21px;
margin-left: -21px;
}
<div class="arrow_box"></div>

Answer 1

The method you are currently using means that you will not be able to set a semi transparent "background" on the triangle. This is because the black borders of the triangle are actually a slightly larger separate triangle, it just happens that the smaller white triangle is overlaying its center. If you modify the white triangle's opacity then you will just peek through to the black triangle.
This can be avoided by using another method to create the triangle. The general principle is to create a box then turn it on its side using transform: rotate(45deg);. Using overflow: hidden; on the container you can cut off half of the box to leave you with a triangle without a bottom border.
You can then skew the container using transform: skewX(55deg); to push the triangle to one side.
body {
background-color: #ccc;
}
.arrow_box {
height: 17px;
left: 40px;
overflow: hidden;
position: absolute;
top: 40px;
transform: skewX(55deg);
width: 34px;
}
.arrow_box:after {
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(0, 0, 0, 1);
content: " ";
height: 20px;
left: 5px;
position: absolute;
top: 5px;
transform: rotate(45deg);
width: 20px;
}
<div class="arrow_box"></div>

Answer 2

you can use transform: skew(60deg,0deg); on the :before and :after
body {
background-color: #ccc;
}
.arrow_box {
position: absolute;
top: 40px;
left: 40px;
background: #fff;
/*border: 1px solid #ffffff;*/
}
.arrow_box:after, .arrow_box:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
transform: skew(60deg,0deg);
}
.arrow_box:after {
border-color: rgba(0, 0, 0, 0);
border-bottom-color: #fff;
border-width: 20px;
margin-left: -12px;
}
.arrow_box:before {
border-color: rgba(255, 255, 255, 0);
border-bottom-color: #000;
border-width: 24px;
margin-left: -21px;
}
<div class="arrow_box"></div>
Fiddle
I don't think you'd be able to make that background transparent easily with the technique you have used to draw triangles. You should use png image if you can.