html5 – 在CSS3中创建图像上方的透明箭头

前端之家收集整理的这篇文章主要介绍了html5 – 在CSS3中创建图像上方的透明箭头前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个效果,我在 CSS3中的任何图像上方都有一个透明箭头.请参见下图.

有什么想法怎么做这个效果?如果有任何帮助,请使用LESS.

解决方法

在CSS3中绘制透明/倒三角形

您可以使用CSS3 triangle technic,并通过组合:before和:after伪对象来制作倒置形状,每个对象绘制三角形的一部分.

你可以这样做:

.image {
    position:relative;
    height:200px;
    width:340px;
    background:orange;
}
.image:before,.image:after {
    content:'';
    position:absolute;
    width:0;
    border-left:20px solid white;
    left:0;
}
.image:before {
    top:0;
    height:20px;
    border-bottom:16px solid transparent;
}
.image:after {
    top:36px;
    bottom:0;
    border-top:16px solid transparent;
}

这是一个说明性的@L_403_2@

我只是用一个平面橙色背景作为例子……但是你可以把它改成图像,你希望得到你想要的东西=)

编辑:然后更多的最终结果可能是像this

原文链接:https://www.f2er.com/html5/168486.html

猜你在找的HTML5相关文章