css布局实现裁角剪角折叠效果代码-html代码-BFW代码库

css布局实现裁角剪角折叠效果代码

代码语言：html

代码描述：css布局实现裁角剪角折叠效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
        html, body, div, span, applet, object, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, acronym, address, big, cite, code,
        del, dfn, em, img, ins, kbd, q, s, samp,
        small, strike, strong, sub, sup, tt, var,
        b, u, i, center,
        dl, dt, dd, ol, ul, li,
        fieldset, form, label, legend,
        table, caption, tbody, tfoot, thead, tr, th, td,
        article, aside, canvas, details, embed,
        figure, figcaption, footer, header, hgroup,
        menu, nav, output, ruby, section, summary,
        time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font: inherit;
          font-size: 100%;
          vertical-align: baseline;
        }
        
        html {
          line-height: 1;
        }
        
        ol, ul {
          list-style: none;
        }
        
        table {
          border-collapse: collapse;
          border-spacing: 0;
        }
        
        caption, th, td {
          text-align: left;
          font-weight: normal;
          vertical-align: middle;
        }
        
        q, blockquote {
          quotes: none;
        }
        q:before, q:after, blockquote:before, blockquote:after {
          content: "";
          content: none;
        }
        
        a img {
          border: none;
        }
        
        article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
          display: block;
        }
        
        body {
          background: #34495e;
          font-size: 100%;
          line-height: 1.3;
          font-family: 'Source Sans Pro', sans-serif;
        }
        
        .container {
          max-width: 960px;
          margin: 75px auto;
        }
        .container > * + * {
          margin-top: 25px;
        }
        
        .blocks {
          margin-left: -2%;
        }
        .blocks:before, .blocks:after {
          content: "";
          display: table;
        }
        .blocks:after {
          content: "";
          clear: both;
        }
        
        .blocks > * {
          float: left;
          margin-left: 2%;
        }
        
        .blocks_4up > * {
          width: 23%;
        }
        
        .cut {
          overflow: hidden;
          padding: 0 0 30px;
        }
        
        .cut-bd {
          padding: 15px 15px 0;
          position: relative;
        }
        
        .cut-hd {
          margin: 0 0 5px;
          padding: 0 0 5px;
        }
        
        .cut-hd_red {
          border-bottom: 1px solid #e43725;
        }
        
        .cut-hd_green {
          border-bottom: 1px solid #17a689;
        }
        
        .cut-bd_red {
          border-top: 5px solid #f39c12;
          background: #e74c3c;
          color: #ecf0f1;
          text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
        }
        .cut-bd_red:before {
          content: "";
          width: 100%;
          height: 30px;
          position: absolute;
          top: 100%;
          right: 30px;
          background: #e74c3c;
        }
        .cut-bd_red:after {
          content: "";
          width: 0;
          height: 0;
          margin-left: -30px;
          position: absolute;
          top: 100%;
          left: 100%;
          border: 15px solid #e74c3c;
          border-right: 15px solid transparent;
          border-bottom: 15px solid transparent;
        }
        
        .cut-bd_green {
          border-top: 5px solid #ecf0f1;
          background: #1abc9c;
          color: #ecf0f1;
          text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
        }
        .cut-bd_green:before {
          content: "";
          width: 100%;
          height: 30px;
          position: absolute;
   .........完整代码请登录后点击上方下载按钮下载查看