使用CSS3伪元素:after实现的三角箭头

CSS Triangles using :after

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #e1e1e1;
}
.container {
    margin: 40px auto;
    width: 600px;
    border: 1px solid #eee;
    padding: 10px;
}
.container:after {
    clear: both;
    content: "";
    display: table;
}
.container img {
    float: left;
}
.arrow-left {
    position: relative;
    width: 200px;
    height: 200px;
    background: #E9E9E9;
    float: right;
}
.arrow-left:before {
    z-index: 9999;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid #E9E9E9;
    position: absolute;
    left: -20px;
    top: 80px;
}
.arrow-right {
    position: relative;
    width: 200px;
    height: 200px;
    background: #fff;
    float: left;
}
.arrow-right img {
    float: right;
}
.arrow-right:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fff;
    position: absolute;
    right: -20px;
    top: 80px;
}

HTML

CSS Triangles using :after

编辑器支持Emmet

快捷键

CSS Triangles using :after

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

使用infamous实现的html普通元素和webgl三维模型融合场景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：