Угловая стрелка на CSS (прозрачная)

Оба варианта я не пробовал, возможно они одинаковые, только угол разный.

1 вариант

 <div class="arrow"></div>

 .arrow {
	width: 350px;
	height: 100px;
	position: relative;
	border: 2px solid #f00;
	border-right: none;
	}
.arrow:before, .arrow:after {
	content: "";
	position: absolute;
	width: 0;
	height: 61%;
	right: -1px;
	border-right: 2px solid #f00;
}
.arrow:before {
	top: 0;
	-webkit-transform: rotate(-34deg);
	-moz-transform: rotate(-34deg);
	-o-transform: rotate(-34deg);
	transform: rotate(-34deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}
.arrow:after {
	bottom: 0;
	-webkit-transform: rotate(34deg);
	-moz-transform: rotate(34deg);
	-o-transform: rotate(34deg);
	transform: rotate(34deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

2 вариант

<div class="arrow"></div>
<div class="arrow" style="height: 40px;"></div>
<div class="arrow" style="height: 150px;"></div>

.arrow {
    position: relative;
    margin-bottom: 6px;
    height: 80px;
    width: 200px;
    border: 2px solid #f00;
    border-right: 0;
    }
.arrow:before, .arrow:after {
	content: '';
	position: absolute;   
	left: 100%;
	height: 50%;
	width: 0;
	margin-left: -2px;
	border-right: 2px solid #f00;
}
.arrow:before {        
	top: 0;
	-webkit-transform: skew(20deg, 0deg);
	-moz-transform: skew(20deg, 0deg);
	-ms-transform: skew(20deg, 0deg);
	-o-transform: skew(20deg, 0deg);
	transform: skew(20deg, 0deg);
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	-o-transform-origin: 0 0;
	transform-origin: 0 0;
}
.arrow:after {
	bottom: 0;
	-webkit-transform: skew(-20deg, 0deg);
	-moz-transform: skew(-20deg, 0deg);
	-ms-transform: skew(-20deg, 0deg);
	-o-transform: skew(-20deg, 0deg);
	transform: skew(-20deg, 0deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}