Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • website css3 Triangles for website

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 324
    Comment on it
    <section class="col-2 ss-style-triangles"></section>
    <section class="color"></section>
    <section class="col-3 ss-style-doublediagonal"></section>
    

    *,

    *:after,
    *::before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    
    /* General styles and layout */
    
    body {
        background: #2980b9;
        color: #fff;
        font-family: 'Lato', Arial, sans-serif;
    }
    
    .container {
        overflow: hidden;
        /* we don't want the pseudo-elements sticking out */
    }
    
    .container svg {
        display: block;
    }
    
    section {
        position: relative;
        padding: 10em 10%;
        background: #2980b9;
        color: #fff;
        text-align: center;
    }
    
    section h2 {
        margin: 0;
        padding: 0;
        font-size: 2.8em;
        font-weight: 400;
    }
    
    section p {
        color: rgba(0,0,0,.3);
        font-size: 1.3em;
        line-height: 1.5;
    }
    
    .text:first-child {
        text-align: right;
    }
    
    .text:nth-child(2) {
        text-align: left;
    }
    
    .col-2 .column {
        width: 49%;
    }
    
    .col-3 .column {
        padding: 0 1%;
        width: 33%;
        text-align: center;
    }
    
    .col-3 .column p {
        padding: 1.4em;
    }
    
    .column {
        display: inline-block;
        vertical-align: top;
    }
    
    .icon {
        display: block;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        background: rgba(0,0,0,0.1);
        color: #fff;
        text-align: center;
        font-size: 8em;
        line-height: 2em;
        margin: 0 auto;
    }
    
    section.color h2 {
        color: #fff;
    }
    
    .color {
        background: #3498db;
    }
    
    /*** Individual section styles and separators ***/
    
    /* Common style for pseudo-elements */
    section::before,
    section::after {
        position: absolute;
        content: '';
        pointer-events: none;
    }
    
    /* Triangles */
    .ss-style-triangles::before,
    .ss-style-triangles::after {
        left: 50%;
        width: 100px;
        height: 100px;
        -webkit-transform: translateX(-50%) rotate(45deg);
        transform: translateX(-50%) rotate(45deg);
    }
    
    .ss-style-triangles::before {
        top: -50px;
        background: #2980b9;
    }
    
    .ss-style-triangles::after {
        bottom: -50px;
        z-index: 10;
        background: inherit;
    }
    
    /* Double Diagonal line */
    
    .ss-style-doublediagonal {
        z-index: 1;
        padding-top: 6em;
        background: #2072a7;
    }
    
    .ss-style-doublediagonal::before,
    .ss-style-doublediagonal::after {
        top: 0;
        left: -25%;
        z-index: -1;
        width: 150%;
        height: 75%;
        background: inherit;
        -webkit-transform: rotate(-2deg);
        transform: rotate(-2deg);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
    
    .ss-style-doublediagonal::before {
        height: 50%;
        background: #116094;
        -webkit-transform: rotate(-3deg);
        transform: rotate(-3deg);
        -webkit-transform-origin: 3% 0;
        transform-origin: 3% 0;
    }
    

    Below is the output generated by using above HTML and CSS code




 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: