使用CSS3 路径裁剪（clip-path）属性实现的曲线图表

CSS Chart with clip-path

图表

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    background: #fdfcfa;
}
.grid {
    border: 1px solid #ccc;
    border-top: 0;
    border-bottom: 0;
    width: 80%;
    max-width: 700px;
    height: 260px;
    margin: 50px auto;
    position: relative;
}
.grid i.x {
    background: transparent;
    width: 100%;
    height: 0;
    z-index: 0;
    position: absolute;
    border-top: 1px dotted #ccc;
    left: 0;
}
.grid i.x:nth-of-type(1) {
    bottom: 20px;
}
.grid i.x:nth-of-type(1):before {
    content: "1";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(2) {
    bottom: 40px;
}
.grid i.x:nth-of-type(2):before {
    content: "2";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(3) {
    bottom: 60px;
}
.grid i.x:nth-of-type(3):before {
    content: "3";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(4) {
    bottom: 80px;
}
.grid i.x:nth-of-type(4):before {
    content: "4";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(5) {
    bottom: 100px;
}
.grid i.x:nth-of-type(5):before {
    content: "5";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(6) {
    bottom: 120px;
}
.grid i.x:nth-of-type(6):before {
    content: "6";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(7) {
    bottom: 140px;
}
.grid i.x:nth-of-type(7):before {
    content: "7";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(8) {
    bottom: 160px;
}
.grid i.x:nth-of-type(8):before {
    content: "8";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(9) {
    bottom: 180px;
}
.grid i.x:nth-of-type(9):before {
    content: "9";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(10) {
    bottom: 200px;
}
.grid i.x:nth-of-type(10):before {
    content: "10";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(11) {
    bottom: 220px;
}
.grid i.x:nth-of-type(11):before {
    content: "11";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(12) {
    bottom: 240px;
}
.grid i.x:nth-of-type(12):before {
    content: "12";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.grid i.x:nth-of-type(13) {
    bottom: 260px;
}
.grid i.x:nth-of-type(13):before {
    content: "13";
    position: absolute;
    right: 100%;
    font-style: normal;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 12px;
    color: #999;
    width: 30px;
    margin-right: 10px;
    text-align: right;
    -webkit-font-smoothing: antialiased;
}
.graph {
    background-color: #036564;
    background-image: -webkit-linear-gradient(#036564, #033649);
    background-image: linear-gradient(#036564, #033649);
    opacity: .65;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    z-index: 1;
    clip-path: polygon(0% 70%, 10% 50%, 20% 60%, 30% 23%, 40% 50%, 50% 67%, 60% 57%, 70% 68%, 80% 70%, 90% 55%, 100% 10%, 100% 100%, 0% 100%);
    -webkit-clip-path: polygon(0% 70%, 10% 50%, 20% 60%, 30% 23%, 40% 50%, 50% 67%, 60% 57%, 70% 68%, 80% 70%, 90% 55%, 100% 10%, 100% 100%, 0% 100%);
    -webkit-animation: do 1.2s ease-in-out forwards;
    -moz-animation: do 1.2s ease-in-out forwards;
    animation: do 1.2s ease-in-out forwards;
}
.graph:hover {
    opacity: .8;
}
@-webkit-keyframes do {
    from {
        clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
}
@-moz-keyframes do {
    from {
        clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
}
@keyframes do {
    from {
        clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
        -webkit-clip-path: polygon(0% 100%, 10% 100%, 20% 100%, 30% 100%, 40% 100%, 50% 100%, 60% 100%, 70% 100%, 80% 100%, 90% 100%, 100% 100%, 100% 100%, 0% 100%);
    }
}
.label {
    color: #999;
    font-size: .9em;
    font-style: italic;
    text-align: center;
    margin: 1em 0;
    -webkit-font-smoothing: antialiased;
}

HTML

CSS Chart with clip-path

图表

编辑器支持Emmet

快捷键

CSS Chart with clip-path

图表

使用ReactJS和D3实现的圆点分布图（散点图）

JS图表（Charts）插件性能测试

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：