带向下箭头的背景图片

background image div with down arrow

css3, arrow

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3509
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/**
 * Down Arrow Mixin
 * 
 * Ever tried to have a little arrow after a div with a
 * background image or a gradient only to find it almost 
 * impossible to get the image/gradient to carry on through
 * into the arrow?
 *
 * This mixin uses css 'clip-path' to achieve the effect.
 * currently it works in Chrome 29+, Firefox 47+, Safari 9.1+, 
 * Opera 39+ iOS Safari 9.2+  and Android Browser 4.4+ 
 * (no IE/Edge support yet but it should gracefully degrade)
 * (http://caniuse.com/#feat=css-clip-path)
 */
/**
 * This example uses a background image
 */

.bg-image {
    background-image: url(https://unsplash.it/1500/750?image=1041);
    background-size: cover;
    height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 53% 94%, 50% 100%, 47% 94%, 0 94%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 53% 94%, 50% 100%, 47% 94%, 0 94%);
    margin-bottom: -3%;
}
/**
 * This example uses a background gradient
 */

.bg-gradient {
    background-image: linear-gradient(to bottom right, red, blue);
    background-size: cover;
    height: 300px;
    clip-path: polygon(0 0, 100% 0, 100% 94%, 53% 94%, 50% 100%, 47% 94%, 0 94%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 94%, 53% 94%, 50% 100%, 47% 94%, 0 94%);
    margin-bottom: -3%;
}
* {
    margin: 0;
    padding: 0;
}
body {
    background: #3e4c53;
    font-family: arial, sans-serif;
}
.wrapper {
    width: 600px;
    margin: 50px auto;
}
.content {
    text-align: center;
    background: white;
    padding: 40px;
}

HTML

background image div with down arrow

css3, arrow

编辑器支持Emmet

快捷键

background image div with down arrow

css3, arrow

带浮动网格图片预览背景的全屏菜单栏

CSS3斜条纹背景和带下压感的按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：