Html CSS-无填充的倾斜边框

我有一个div，我需要一个左边倾斜的边框，但我只找到用颜色填充元素的解决方案。 我只需要边界，如下图所示：

我该怎么做

我的实际代码：

HTML

HTML和CSS

#a{
位置：相对位置；
宽度：120px；
填充：10px 20px；
字体大小：20px；
位置：相对位置；
左边距：50像素；
颜色：#2E8DEF；
边框：3px实心#2E8DEF；
左边框：0；
}
#a:以前{
内容：“；
位置：绝对位置；
显示：块；
宽度：50%；
身高：100%；
顶部：-3px；
左：-30px；
z指数：-1；
边框：3px实心#2E8DEF；
右边框：0px；
变换原点：左下角；
-ms变换：倾斜（-30度，0度）；
-webkit变换：倾斜（-30度，0度）；
变换：倾斜（-30度，0度）；
}

你好

我使用border和before伪元素创建了形状。希望这会有所帮助。

.classicboorder{
宽度：200px；
填充：4px0；
边框：2个实心#999；
位置：相对位置；
左边距：9px；
文本对齐：居中；
字体大小：25px；
}
.分类顺序：之前{
高度：36px；
宽度：40px；
边框：2个实心#999；
内容：''；
位置：绝对位置；
右边框：0px；
边框顶部：0px；
变换：倾斜（340度）；
-webkit变换：倾斜（340deg）；
-moz变换：倾斜（340deg）；
背景：#fff；
左：-9px；
顶部：0px；
}

30分钟>

基于以下答案，我找到了一种更优雅、更易于维护的方法：

新代码：

.row{
显示：块；
溢出：隐藏；
背景：线性渐变（向右，#fff，透明，#fff，#fff）；
}
.阿罗{
显示：内联块；
文本对齐：居中；
文字装饰：无；
填充：5px 0 5px 5px；
边框样式：实心；
边框宽度：1px 0px 1px 1px；
边框颜色：#929A9D透明#929A9D#929A9D；
变换：skewX（-20度）；
-ms变换：skewX（-20度）；
-webkit变换：skewX（-20度）；
宽度：100px；
}
.arrow>div{
显示：内联块；
文字装饰：无；
变换：skewX（20度）；
-ms变换：skewX（20度）；
-webkit变换：skewX（20度）；
}
.arrow>img{
垂直对齐：中间对齐；
宽度：12px；
高度：12px；
文字装饰：无；
变换：skewX（20度）；
-ms变换：skewX（20度）；
-webkit变换：skewX（20度）；
}

30分钟

请发布您的代码。这里已经有可能重复的答案，只需添加边框即可。“透明剪切边”并不能解决问题，因为剪切边上的边框会消失。很好的答案，唯一的问题可能是如果我的div在一个复杂的页面中，可能很难管理css使其始终与div重合。谢谢Nodilink，我想这在你第一次创建时并不复杂。作为另一个答案（您的解决方案非常相似）：很好，唯一的问题可能是，如果我的div位于一个复杂的页面中，则很难管理css以始终与div重合。

<div class="arrow">
    <span id="time">30 mins</span>
    <img src="assets/up_arrow.png" />
</div>

.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;
 }