利用伪类编写纯css 飘带效果

最新推荐文章于 2023-09-16 09:16:19 发布

鱼与雨于语

最新推荐文章于 2023-09-16 09:16:19 发布

阅读量1k

点赞数 2

分类专栏：前端 css html 文章标签： css 飘带

本文链接：https://blog.csdn.net/sinat_38914900/article/details/84565306

版权

前端同时被 3 个专栏收录

16 篇文章 0 订阅

订阅专栏

css

11 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

css 飘带

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>飘带效果</title>
    <style>
        *{ margin: 0; padding: 0; }
        body { width: 600px; margin: 30px auto; }
        .mt30 { margin-top: 30px; }
        .ml5 { margin-left: 5px; }
        .pl16 { padding-left: 16px; }
        .tc { text-align: center; }
        .pr { position: relative; }
        /* title1 */
        .title1 { position: relative; display: inline-block; }
        .title1 span { position: relative; z-index: 2; display: inline-block; padding: 0 15px; height: 32px; line-height: 32px; background-color: #0055ff; color: #fff; font-size: 16px; box-shadow: 0 10px 6px -9px rgba(0,0,0,.6); }
        .title1 span::before, .title1 span::after { position: absolute; bottom: -6px; border-width: 3px 5px; border-style: solid; content: ''; }
        .title1 span::before { left: 0; border-color: #0011cc #0011cc transparent transparent; }
        .title1 span::after { right: 0; border-color: #0011cc transparent transparent #0011cc; }
        .title1::before, .title1::after { position: absolute; top: 6px; content: ''; border-style: solid; border-color: #0044cc; }
        .title1::before { left: -32px; border-width: 16px 26px 16px 16px; border-left-color: transparent; }
        .title1::after { right: -32px; border-width: 16px 16px 16px 26px; border-right-color: transparent; }
        /* title2 */
        .title2 { position: relative; display: inline-block; padding: 0 15px; height: 32px; line-height: 32px; background-color: #0055ff; color: #fff; font-size: 16px; }
        .title2::before { position: absolute; top: -4px; left: 0; border-width: 2px 4px; border-style: solid; border-color: transparent #0011cc #0011cc transparent; content: ''; }
        .title2::after { position: absolute; top: 0; right: -8px; border-width: 16px 8px 16px 0; border-style: solid; border-color: #0055ff transparent #0055ff #0055ff; content: ''; }
        /* title3 */
        .title3 { position: relative; display: inline-block; margin-right: 16px; padding: 0 10px; height: 32px; line-height: 32px; background-color: #0055ff; color: #fff; font-size: 16px;  }
        .title3::before { position: absolute; top: 0; left: -16px; border-width: 16px 16px 16px 0; border-style: solid; border-color: transparent #0055ff transparent transparent; content: ''; }
        .title3::after { position: absolute; top: 0; right: -16px; border-width: 16px 16px 16px 0; border-style: solid; border-color: #0055ff transparent #0055ff #0055ff; content: '';} 
        /* title4 */
        .title4 { width: 200px; height: 140px; position: absolute; top: -8px; left: -8px; overflow: hidden; }
        .title4::before { position: absolute; left: 124px; border-radius: 8px 8px 0 0; width: 16px; height: 8px; background-color: #0011cc; content: ''; }
        .title4::after { position: absolute; left: 0; top: 124px; border-radius: 0 8px 8px 0; width: 8px; height: 16px; background-color: #0011cc; content: ''; }
        .title4 span { display: inline-block; text-align: center;  width: 200px; height: 40px; line-height: 40px; position: absolute; top: 30px; left: -50px; z-index: 2; overflow: hidden; -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); border: 1px dashed #fff; box-shadow: 0 0 0 3px #0055ff,  0 14px 7px -9px rgba(0,0,0,.6);  background-color: #0055ff; color: #fff; }
        /* title5 */
        .title5 { width: 140px; height: 200px; position: absolute; top: -8px; right: -8px; overflow: hidden; }
        .title5::before { position: absolute; right: 124px; border-radius: 8px 8px 0 0; width: 16px; height: 8px; background-color: #0011cc; content: ''; }
        .title5::after { position: absolute; right: 0; top: 124px; border-radius: 0 8px 8px 0; width: 8px; height: 16px; background-color: #0011cc; content: ''; }
        .title5 span { display: inline-block; text-align: center;  width: 200px; height: 40px; line-height: 40px; position: absolute; top: 30px; right: -50px; z-index: 2; overflow: hidden; -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border: 1px dashed #fff; box-shadow: 0 0 0 3px #0055ff,  0 14px 7px -9px rgba(0,0,0,.6);  background-color: #0055ff; color: #fff; }
    </style>
</head>
<body>
    <div class="tc">
        <div class="title1"><span>标题标题标题标题</span></div>
    </div>
    <div class="mt30">
        <span class="title2">标题标题标题标题</span>
    </div>
    <div class="mt30 pl16">
        <span class="title3">标题标题标题标题</span>
    </div>
    <div class="mt30 pl16">
        <span class="title3">标题标题标题标题</span><span class="title3 ml5">标题标题标题标题</span><span class="title3 ml5">标题标题标题标题</span>
    </div>
    <div class="pr mt30" style="background-color: #eee; height: 200px;">
        <div class="title4"><span>标题标题标题</span></div>
        <div class="title5"><span>标题标题标题</span></div>
    </div>
</body>
</html>