CSS3 屏幕边角缎带

Corner Ribbons for web applications

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #374047;
}
a {
    color: #fff;
    font-size: 22px;
    text-decoration: none;
}
h1,
h2,
h3 {
    text-align: center;
    color: #fff;
}
h1 {
    margin-top: 225px;
    font-size: 60px;
}
h2 {
    font-size: 30px;
}
.corner-ribbon {
    width: 225px;
    height: 35px;
    position: absolute;
    text-align: center;
    line-height: 35px;
    border: 1px solid;
}
.corner-ribbon:hover {
    font-size: 26px;
}
.top-left,
.top-left:hover {
    top: 40px;
    left: -40px;
    transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    background-color: #2196F3;
}
.top-left {
    box-shadow: 3px 4px 3px 3px #1976D2;
}
.top-left:hover {
    box-shadow: 7px 7px 7px 7px #1976D2;
}
.top-right,
.top-right:hover {
    top: 40px;
    right: -40px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    background-color: #FF9800;
}
.top-right {
    box-shadow: 4px 4px 4px 4px #F57C00;
}
.top-right:hover {
    box-shadow: 7px 7px 7px 7px #F57C00;
}
.bottom-left,
.bottom-left:hover {
    top: auto;
    bottom: 40px;
    left: -40px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    background-color: #4CAF50;
}
.bottom-left {
    box-shadow: 4px 4px 4px 4px #4CAF50;
}
.bottom-left:hover {
    box-shadow: 7px 7px 7px 7px #4CAF50;
}
.bottom-right,
.bottom-right:hover {
    top: auto;
    bottom: 40px;
    right: -40px;
    transform: rotate(-40deg);
    -webkit-transform: rotate(-40deg);
    background-color: #FF4081;
}
.bottom-right {
    box-shadow: 4px 4px 4px 4px #FF4081;
}
.bottom-right:hover {
    box-shadow: 7px 7px 7px 7px #FF4081;
}

HTML

Corner Ribbons for web applications

编辑器支持Emmet

快捷键

Corner Ribbons for web applications

CSS3 磨砂玻璃的侧面板（边栏浮层）

CSS3 带空军1号飞过背景的白宫场景动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：