CSS properties - clip-path

revision:

Content

clip property clip-path property

clip property

top

- defines a visible portion of an element. The clip property applies only to absolutely positioned elements — that is, elements with "position:absolute" or "position:fixed".

The "clip" property let you specify a rectangle that is specified as four coordinates, all from the top-left corner of the element to be clipped.

The "clip" property does not work if "overflow:visible".
It is deprecated and will be replaced by the "clip-path property" in the future.

CSS syntax : clip: auto | shape | initial | inherit;

Property values:

auto : no clipping will be applied. This is default

shape : clips an element. The only valid value is: rect (top, right, bottom, left)

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.clip="rect(0px,50px,50px,0px)"

example: clip property

code: 
                  <div>
                    <img id="clip-1" src="../../pics/smiley.png" width="150" height="150">
                </div>
                <style>
                  #clip-1 {position: absolute;clip: rect(0vw,10vw,10vw,0vw);}
                </style>

clip-path property

top

- let you clip an element to a basic shape or to an SVG source. The property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

The "clip-path" property will replace the deprecated "clip" property.

Syntax: clip-path: clip-source | basic-shape |margin-box | border-box | padding-box |content-box | fill-box | stroke-box | view-box | none | initial | inherit;

Property values:

clip-source : defines a URL to an SVG <clipPath> element. The clipping part is taken from another HTML element.

basic-shape : include some shapes - like circle, rectangle, ellipse, polygon or inset - that clips the given image

margin-box : uses the margin box as the reference box.

border-box : uses the border box as the reference box.

padding-box : uses the padding box as the reference box.

content-box : uses the content box as the reference box.

fill-box : uses the object bounding box as the reference box.

stroke-box : uses the stroke bounding box as the reference box.

view-box : uses the SVG viewport as the reference box.

none : no clipping is done. This is default.

initial : sets this property to its default value.

inherit : inherits this property from its parent element

example: clip-path property

clip property

Code:
            <img id="one" src="../../pics/2.jpg" width="200" height="auto">
            <style>
              #one {margin-top: 2vw; position: relative; clip: rect(1vw,26vw,36vw,0vw);}
            </style>

example: clip-path property

clip-path property

Code:
              <img id="two" src="../../pics/2.jpg" width="200" height="240">
              <style>
                  #two {clip-path: circle(50%);}
              </style>

example: clip-path property

example: various shapes

holidays
holidays
holidays
holidays
Code:
          <section>
              <div class="one"><img src="../../pics/2.jpg" width="200" height="200" alt="holidays"></div>
              <div class="two"><img src="../../pics/2.jpg" width="200" height="200" alt="holidays"></div>
              <div class="three"><img src="../../pics/2.jpg" width="200" height="200" alt="holidays"></div>
              <div class="four"><img src="../../pics/2.jpg" width="200" height="200" alt="holidays"></div>
          </section>
          <Style>
              section{display: flex; flex-flow: row wrap;}
              .one img {clip-path: circle(50%);}
              .two img {clip-path: ellipse(60% 50%);}
              .three img {clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);}
              .four img {clip-path: path("M150 0 L50 100 L300 200 Z");}
          </Style>

example: clip-path property

without and with clipping

Without clipping

With clipping

Code:
        <div>
            <div class="no-clip">
                <p>Without clipping</p>
                <img id="imgA" height="200" width="200" src="../../pics/5.jpg">
            </div>
            <div class="clip">
            <p>With clipping</p>
              <img id="img" height="200" width="200" src="../../pics/5.jpg">
              <img id="img1" height="200" width="200" src="../../pics/5.jpg">
              <img id="img2" height="200" width="200" src="../../pics/5.jpg">
              <img id="img3" height="200" width="200" src="../../pics/5.jpg">
            </div>
        </div>
            <style>
                #img {margin-bottom: 2vw;clip-path: circle(40%);}
                #img1 {margin-bottom: 2vw;clip-path: ellipse(115px 55px at 50% 40%);}
                #img2 {margin-bottom: 2vw;clip-path: polygon(50% 20%, 90% 80%, 10% 80%);}
                #img3 {margin-bottom: 2vw;clip-path: inset(22% 12% 15px 35px);}
            </style>

example: clip-path property

original shape and derivatives

original shape

circle

quadrant

Circle 2

code:
          <section>
            <div class="square"><p>original shape</p></div>
            <div class="circle"><p>circle</p></div>
            <div class="quadrant"><p>quadrant</p></div>
            <div class="circle2"><p>Circle 2</p></div>
          </section>
          <style>
            section{display: flex; flex-flow: row wrap;}
          .square{ display: inline; background-color: dodgerblue; width: 20vw; height: 15vw; border:
            0.2vw solid black; margin-bottom: 1vw;}
          .circle{ background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
            clip-path: circle(8vw at 50% 50%); text-align: center;}
          .quadrant{ background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
            clip-path: circle(8vw at 0 0); text-align: left;}
          .circle2{ background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
            clip-path: circle(8vw at 8vw 8vw); text-align: center;}
          </style>

example: clip-path property

original shape and inset value

original shape

inset

tweaking the inset

rounded inset

rounded inset - 2

code:
          <section>
            <div class="square"><p>original shape</p></div>
            <div class="inset"><p>inset</p></div>
            <div class="inset2"><p>tweaking the inset</p></div>
            <div class="inset-round"><p>rounded inset</p></div>
            <div class="inset-round-2"><p>rounded inset - 2</p></div>
          </section>
          <style>
          section{display: flex; flex-flow: row wrap;}
          .square{ display: inline; background-color: dodgerblue; width: 20vw; height: 15vw; border:
             0.2vw solid black; margin-bottom: 1vw;}
          .inset{background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
             clip-path: inset(2vw); text-align: center; padding-top: 0.3vw;}
          .inset2{background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
             clip-path: inset(2vw 2vw 5vw 2vw); text-align: center; padding-top: 0.3vw;}
          .inset-round{background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
             clip-path: inset(2vw 2vw 5vw round 1vw); text-align: center;padding-top: 0.3vw;}
          .inset-round-2{background-color: dodgerblue; width: 20vw; height: 15vw; border: 0.2vw solid black;
            clip-path: inset(2vw 2vw 5vw round 1vw 0); text-align: center;padding-top: 0.3vw;}
          </style>

example: clip-path property

clip-path examples: original shape and other values

original shape

circle

ellipse

polygon

code:
          <section>
            <div class="square"><p>original shape</p></div>
            <div class="circle3"><p>circle</p></div>
            <div class="ellipse"><p>ellipse</p></div>
            <div class="polygon"><p>polygon</p></div>
          </section>
          <style>
            section{display: flex; flex-flow: row wrap;}
            .square{ display: inline; background-color: dodgerblue; width: 20vw;
                height: 15vw; border: 0.2vw solid black;  margin-bottom: 1vw;}
            .circle3{background-color: dodgerblue; width: 20vw; height: 15vw;
                border: 0.2vw solid black; clip-path: circle(8vw at 50% 50%);
                text-align: center;padding-top: 0.3vw;}
          .ellipse{background-color: dodgerblue; width: 20vw; height: 15vw;
            border: 0.2vw solid black; clip-path: ellipse(10vw 8vw at center);
            text-align: center;padding-top: 0.3vw;}
          .polygon{background-color: dodgerblue; width: 20vw; height: 15vw;
            border: 0.2vw solid black; clip-path: polygon(0% 0%, 100% 0%, 100% 80%,
             0% 100%); text-align: center;padding-top: 0.3vw;}
          </style>

example: clip-path property

clip-path examples: polygon shapes

holidays 
code:
          <section>
            <div class="triangle"></div>
            <div class="X"><p></div>
            <div class="star"><p></p></div>
            <div class="container"><img src="../../pics/5.jpg" alt="holidays"> </div>
          </section>
          <style>
            section{display: flex; flex-flow: row wrap;}
            .triangle{background-color: dodgerblue; width: 15vw; height: 10vw;
                border: 0.2vw solid black; -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                clip-path: polygon(50% 0%, 0% 100%,
              100% 100%); text-align: center;}
            .X {background-color: dodgerblue; width: 15vw; height: 10vw; border: 0.2vw solid
                black;-webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%,
                50% 70%,80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);clip-path:
                polygon(20% 0%,0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100%
                80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);}
            .star{background-color: dodgerblue; width: 15vw; height: 10vw; border: 0.2vw solid black;
                -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%,
                 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98%
                 35%, 68% 57%,79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);}
            img {-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0%
                25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0%
                25%); width: 20vw; height: 15vw;}
          </style>