How to use clip-path in CSS (with examples)

How to use clip-path in CSS (with examples) Thumbnail image

How to use clip-path in CSS (with examples) Table of contents

  1. How to do it
  2. Generate a CSS clip path/play with settings
    1. Polygon data:

    CSS Clip path is quite a useful feature of CSS. Here is one way to use the clip path rule, on the background image of an element.

    Here is an example. It isn't a great looking one (you can do much nicer things with it) but the example is simple.

    The background image is a square image. It is not a <img> tag - it is a CSS tag. The pink is from the div that is behind the div with the background-image set. I've included some text to show you how it works.

    Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc Hello, world - Web dev etc
    1. <div id='outer_clippath'>
    2.     <div id='clippath_1'>
    3.         Hello, world - <a href='https://webdevetc.com/'>Web dev etc</a> (repeated...)
    4.     </div>
    5. </div>
    1. #outer_clippath {
    2. /* this is not needed, but just to show where the inner div was clipped */
    3. background: pink;
    4. width: 80%;
    5. margin: 0 auto;
    6. max-width: 100%;
    7. }
    8.  
    9. #clippath_1 {
    10. background-image: url('images/background.jpg');
    11. width: 100%;
    12. height: 200px;
    13. background-size: cover;
    14.  
    15. color: white;
    16.  
    17. /* the next line is the important part */
    18. clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    19. }

    How to do it

    1. #clippath_1 {
    2. clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 100%);
    3. }

    It is quite easy to generate a clip path. There are a few ways to do it, but the easiest is to use a polygon() with various coordinates. You can use absolute values (such as 40px) or relative (such as 100%)

    Generate a CSS clip path/play with settings

    Hello, world - Web dev etc

    Div height:

    Div width:

    Polygon data:

    add new
    delete
    delete
    delete
    delete
    webdevetc profile pic
    webdevetc

    I am a 29 year old freelance backend web developer from London, mostly focusing on PHP and Laravel lately. This is my site - I mostly write about PHP here. Contact me here (especially for any contracting jobs early 2019 in London ;) ).

    Leave a Comment