html - 图像前的空心箭头

This question already has answers here:

Transparent arrow/triangle indented over an image

(4 个回答)


6年前关闭。




我正在尝试在图像前创建一个空心 css 箭头。

我明白了……但感觉很脏。有没有更好的方法来做到这一点？
跨浏览器兼容性(IE8+)会很棒。

社会保障局

.arrowwrap {
    width:100%;
    padding:0;
    position:relative;
    overflow:hidden;
    margin:-$arrow_height 0 0 0;
    &:after {
        content:'';
        position:absolute;
        height:$arrow_height;
        width:50%;
        margin:-$arrow_height 0 0 -$arrow_width;
        left:0;
        z-index:99999;
        background:$box_color;
    }
    &:before {
        content:'';
        position:absolute;
        height:$arrow_height;
        width:100%;
        left:50%;
        margin:0 0 0 $arrow_width;
        z-index:99999;
        background:$box_color;
    }
    .arrowone {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: $arrow_height $arrow_width 0 $arrow_width;
        /* border-color: transparent transparent #333 transparent; */
        border-color:transparent $box_color $box_color $box_color;
        margin:auto;
    }
}

http://jsfiddle.net/dhs2eba2/

最佳答案

如果您想最小化和删除所有非语义标记，您可以执行以下操作:

DEMO

这种技术依赖于伪元素，因此可以防止使用非语义标记。 IE8+ 支持伪元素，参见 canIuse 。它还需要 box-sizing 属性来启用响应宽度( box-sizing: border-box 也受 IE8+ 支持，请参阅 canIuse )。

HTML :

<div class="wrap">
    <img src="http://placekitten.com/800/350" />
    <article>
        <h1>Hellow World, meow</h1>
    </article>
</div>

CSS :

body {
    background:#fad;
    padding:0;
    margin:0;
}

$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;

.wrap {
    img {
        width:100%;
        height:auto;
        vertical-align:bottom;
    }
    article{
        padding:20px;
        background:$box_color;
        color:#fff;
        position:relative;
    }
}
article:before, article:after{
    content:'';
    position:absolute;
    width:50%;
    bottom:100%;
    box-sizing:border-box;
}
article:before{
    left:0;
    border-bottom:20px solid #D3D030;
    border-right:20px solid transparent;
}
article:after{
    right:0;
    border-bottom:20px solid #D3D030;
    border-left:20px solid transparent;
}

关于html - 图像前的空心箭头，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25739394/