CSS properties - clip-path
revision: March 21, 2024
Content
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". 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
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
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
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
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
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
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>
