CSS-不填充的斜边框 [英] CSS - Oblique border without filling

问题描述

我有一个div，我需要一个倾斜于左侧的边框，但是我只找到那些元素填充有颜色的解决方案.我只需要边框，就像这张照片一样:

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:

我该怎么做?

我的实际代码:

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

推荐答案

基于以下答案，我发现了一种更优雅的方法，它更易于维护:

I found a more elegant way, that's more easier to maintain, based on this answer: https://stackoverflow.com/a/24691352/5287860.

新代码:

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

这篇关于CSS-不填充的斜边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！