CSS - 没有填充的斜边框

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>