Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder LearningCoder's Avatar
    Join Date
    Jan 2011
    Location
    The Pleiades
    Posts
    922
    Thanks
    76
    Thanked 29 Times in 29 Posts

    How can I do this?

    Good morning all,

    I have seen an effect on divs on numerous websites and would like have the same effect. I see it on a lot of WordPress websites.

    I've attched an image below of exactly what I'm talking about as the above is a bit vague. It's like the top div 'wraps' behind the content below. I've looked at the source and know multiple divs are required but don't really understand the code too well.

    Here is the image: tspv-websites.co.uk/effect.png

    Thank you very much for your time.

    Kind regards,

    NM

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,180
    Thanks
    23
    Thanked 603 Times in 602 Posts
    I take it it's the half box(arrow) your asking about.
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    .arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #f00;
    position:relative;
    }
    .square{
    width: 20px;
    height: 20px;
    margin-left: 20px;
    position:absolute;
    top: 0px;
    background-color: #fff
    }
    </style>
    </head>

    <body>
    <div class="arrow-down"></div>
    <div class="square"></div>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New to the CF scene
    Join Date
    Dec 2013
    Location
    New Delhi
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    can you show me the links.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •