div+css布局丝带缎带装饰效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css布局丝带缎带装饰效果代码,适合卡片图文列表中的装饰标注效果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; font-family: 'Ubuntu', sans-serif; } article { border-bottom: 2px solid $dark; border-top: 6px solid $light; padding: 20px 0; position: relative; text-align: center; } article:first-child { border-top: none; } article:last-child { border-bottom: none; } aside { position: relative; box-sizing: border-box; display: inline-block; margin: 0 20px; top: -26px; width: 80px; padding: 5px 8px 10px; background-color: $dark; color: $light; } aside:before, aside:after { content: ''; position: absolute; left: 0; border-style: solid; border-width: 0 40px 20px; } aside:before { bottom: -20px; border-color: transparent $dark; z-index: 1234; } aside:after { bottom: -26px; border-top-width: 6px; border-color: $light $light transparent $light; } aside span { display: block; } aside span.day { font-size: 60px; line-height: 65px; font-family: 'PT Serif', monospace; } aside span.month { font-family: 'PT Mono', monospace; } section { margin: 0 auto; max-width: 660px; padding: 0 20px; } h1 { font-weight: normal; position: relative; background: #F4F9FA; width: 50%; color: #F8463F; text-align: center; padding: 10px 20px; margin: 20px auto 40px; text-transform: uppercase; border-radius: 2px; } h1:before, h1:after { content: ""; position: absolute; top: -6px; border: 18px solid #DCF4F4; } h1:before { left: -36px; border-right-width: 18px; border-left-color: transparent; } h1:after { right: -36px; border-left-width: 18px; border-right-color: transparent; } h1 span:before, h1 span:after { content: ""; position: absolute; border-style: solid; border-color: #A7CECC transparent transparent transparent; top: -6px; transform: rotate(180deg); } h1 span:before { left: 0; border-width: 6px 0 0 6px; } h1 span:after { right: 0; border-width: 6px 6px 0 0; } .ribbon { width: 48%; height: 188px; position: relative; float: left; margin-bottom: 30px; text-transform: uppercase; color: white; } .ribbon:nth-child(even) { margin-right: 4%; } @media (max-width: 500px) { .ribbon { width: 100%; } .ribbon:nth-child(even) { margin-right: 0%; } } .ribbon1 { position: absolute; top: -6.1px; right: 10px; } .ribbon1:after { position: absolute; content: ""; width: 0; height: 0; border-left: 53px solid transparent; border-right: 53px solid transparent; border-top: 10px solid #F8463F; } .ribbon1 span { position: relative; display: block; text-align: center; background: #F8463F; font-size: 14px; line-height: 1; padding: 12px 8px 10px; border-top-right-radius: 8px; width: 90px; } .ribbon1 span:before, .ribbon1 span:after { position: absolute; content: ""; } .ribbon1 span:before { height: 6px; width: 6px; left: -6px; top: 0; background: #F8463F; } .ribbon1 span:after { height: 6px; width: 8px; left: -8px; top: 0; border-radius: 8px 8px 0 0; background: #C02031; } .ribbon2 { width: 60px; padding: 10px 0; position: absolute; top: -6px; left: 25px; text-align: center; border-top-left-radius: 3px; background: #F47530; } .ribbon2:before { height: 0; width: 0; right: -5.5px; top: 0.1px; border-bottom: 6px solid #8D5A20; border-right: 6px solid transparent; } .ribbon2:before, .ribbon2:after { content: ""; position: absolute; } .ribbon2:after { height: 0; width: 0; bottom: -29.5px; left: 0; border-left: 30px solid #F47530; border-right: .........完整代码请登录后点击上方下载按钮下载查看
网友评论0