css实现七种不同的飘带丝巾丝带效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现七种不同的飘带丝巾丝带效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /*body {margin:0;font-family: 'Ubuntu', sans-serif;}*/ section {margin:0 auto; max-width:660px;padding: 0 20px} h2 { 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; } h2:before, h2:after { content: ""; position: absolute; display: block; top: -6px; border: 18px solid #DCF4F4; } h2:before { left: -36px; border-right-width: 18px; border-left-color: transparent; } h2:after { right: -36px; border-left-width: 18px; border-right-color: transparent; } h2 span:before, h2 span:after { content: ""; position: absolute; display: block; border-style: solid; border-color: #A7CECC transparent transparent transparent; top: -6px; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } h2 span:before { left: 0; border-width: 6px 0 0 6px; } h2 span:after { right: 0; border-width: 6px 6px 0 0; } .ribbon { display: inline-block; width: 48%; height: 188px; position: relative; float: left; margin-bottom: 30px; background: url(//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_160,/quality,q_90); background-size: cover; 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: -6px; right: 10px; } .ribbon1:after { position: absolute; content: ""; display: block; width: 0; height: 0; border-left: 53px solid transparent; border-right: 53px solid transparent; border-top: 10px solid #F8463F; } .ribbon1 span { position: relative; display: inline-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: ""; display: block; } .ribbon1 span:before { background: #F8463F; height: 6px; width: 6px; left: -6px; top: 0; } .ribbon1 span:after { background: #C02031; height: 6px; width: 8px; border-radius: 8px 8px 0 0; left: -8px; top: 0; } .ribbon2 { display: inline-block; width: 60px; padding: 10px 0; background: #F47530; top: -6px; left: 25px; position: absolute; text-align: center; border-top-left-radius: 3px; } .ribbon2:before { height: 0; width: 0; border-bottom: 6px solid #8D5A20; border-right: 6px solid transparent; right: -6px; top: 0; } .ribbon2:before, .ribbon2:after { content: ""; position: absolute; } .ribbon2:after { height: 0; width: 0; border-left: 30px solid #F47530; border-right: 30px solid #F47530; border-bottom: 30px solid transparent; bottom: -30px; left: 0; } .ribbon3 { display: inline-block; position: absolute; width: 150px; height: 50px; line-height: 50px; padding-left: 15px; background: #59324C; left: -8px; top: 20px } .ribbon3:before, .ribbo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0