CSS - Oblique border without filling - html

Question

I've a div and I need a border with the left side oblique, but I'm finding only solutions that have the element filled with color.
I need only the border, like this picture:
How can I do this?
My actual code:
HTML
<div class="arrow">
<span id="time">30 mins</span>
<img src="assets/up_arrow.png" />
</div>
CSS
.arrow {
display: inline-block;
text-align: right;
text-decoration: none;
margin-left: 35%;
padding: 5px 0 5px 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #929A9D transparent #929A9D transparent;
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
}

Answer 1

TRY THIS DEMO
HTML & CSS
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
margin-left:50px;
color: #2E8DEF;
border: 3px solid #2E8DEF;
border-left:0;
}
#a:before {
content: " ";
position: absolute;
display: block;
width: 50%;
height: 100%;
top: -3px;
left: -30px;
z-index: -1;
border:3px solid #2E8DEF;
border-right: 0px;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
<div id="a">
Hello
</div>

Answer 2

I have created the shape using border and before pseudo element. Hope this will help.
.ClassicBorder {
width: 200px;
padding: 4px 0;
border: 2px solid #999;
position: relative;
margin-left: 9px;
text-align: center;
font-size: 25px;
}
.ClassicBorder:before {
height: 36px;
width: 40px;
border: 2px solid #999;
content: '';
position: absolute;
border-right: 0px;
border-top: 0px;
transform: skew(340deg);
-webkit-transform: skew(340deg);
-moz-transform: skew(340deg);
background: #fff;
left: -9px;
top:0px;
}
<div class="ClassicBorder">
30 Mins >
</div>

Answer 3

I found a more elegant way, that's more easier to maintain, based on this answer: https://stackoverflow.com/a/24691352/5287860.
New code:
.row {
display: block;
overflow: hidden;
background: linear-gradient(to right, #fff, transparent, #fff, #fff);
}
.arrow {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 5px 0 5px 5px;
border-style: solid;
border-width: 1px 0px 1px 1px;
border-color: #929A9D transparent #929A9D #929A9D;
transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
width: 100px;
}
.arrow > div {
display: inline-block;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
<div class="row">
<div class="arrow">
<div><span id="">30 mins</span></div>
<img src="assets/up_arrow.png" />
</div>
</div>