css布局实现卡片边角丝带装饰效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现卡片边角丝带装饰效果代码,左上角、左下角、右上角、右下角丝带效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url(https://fonts.googleapis.com/css?family=Lato:700); body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f0f0f0; } .box { position: relative; max-width: 600px; width: 90%; height: 400px; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); } /* common */ .ribbon { width: 150px; height: 150px; overflow: hidden; position: absolute; } .ribbon::before, .ribbon::after { position: absolute; z-index: -1; content: ''; display: block; border: 5px solid #2980b9; } .ribbon span { position: absolute; display: block; width: 225px; padding: 15px 0; background-color: #3498db; box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; font: 700 18px/1 'Lato', sans-serif; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-transform: uppercase; text-align: center; } /* top left*/ .ribbon-top-left { top: -10px; left: -10px; } .ribbon-top-left::before, .ribbon-top-left::after { border-top-color: transparent; border-left-color: transparent; } .ribbon-top-left::before { top: 0; right: 0; } .ribbon-top-left::after { bottom: 0; left: 0; } .ribbon-top-left span { right: -25px; top: 30px; transform: rotate(-45deg); } /* top right*/ .ribbon-top-right { top: -10px; right: -10px; } .ribbon-top-right::before, .ribbon-top-right::after { border-top-color: transparent; border-rig.........完整代码请登录后点击上方下载按钮下载查看
网友评论0