Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Make a Shape Like On Image in Pure CSS?
We can avoid having everything in our designs look like a box by using clipping in CSS. You can design a clip path and the shape you want to display on the webpage by utilizing a variety of basic shapes or an SVG.
Web page elements are all defined inside of a rectangular box. But that doesn't mean that everything must have a box-like appearance. Using the CSS clip-path property, you can remove specific portions of an image or other element to produce eye-catching effects.
Let’s dive into the article for getting better understanding on making a shape like on image in pure CSS.
Using SVG element
The SVG element is a container that defines a new coordinate system and viewport. It can be used to embed an SVG fragment inside of another SVG or HTML document in addition to serving as the outermost element of SVG documents.
Example
In the following example, we are using the SVG to draw a shape on the image that was uploaded to the webpage.
<!DOCTYPE html>
<html>
<body>
<style>
img {
border: 4px #D5F5E3 solid;
border-top-left-radius: 25% 30%;
border-bottom-left-radius: 40% 10%;
border-top-right-radius: 30% 25%;
border-bottom-right-radius:70% 85%;
}
</style>
<img src="https://www.tutorialspoint.com/images/logo.png" style="width:100%">
</body>
</html>
When the script gets executed, it will generate an output consisting of an image along with a shape drawn on the image displayed on the webpage.
Using polygon()
By setting the coordinates of each point, the polygon() value can allow you define as many points as you need to create fairly complex shapes.
Example
Considering the following example, where we are using the polygon() function to draw a shape on the image.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #EAFAF1 ;
padding: 21px;
border: 21px solid #D2B4DE ;
width: 201px;
height: 101px;
display: inline-block;
}
.shape {
clip-path: polygon(74% 1%, 99% 49%, 74% 101%, 1% 102%, 26% 52%, 1% 1%);
}
</style>
<div class="tutorial shape">
<img src="https://www.tutorialspoint.com/images/logo.png">
</div>
</body>
</html>
On running the above script, the output window will pop up, displaying the image uploaded along with a shape drawn on the image displayed on the webpage.
Using ellipse()
Since an ellipse is essentially a squashed circle, it behaves very similarly to circle() but also takes an x and y radius as well as the ellipse's center value.
Example
Run the below code to see how the ellipse()method was used to draw a shape on the image.
<!DOCTYPE html>
<html>
<body>
<style>
.tutorial {
background-color: #FCF3CF;
padding: 21px;
border: 22px solid #DE3163;
width: 201px;
height: 103px;
display: inline-block;
}
.shape {
clip-path: ellipse(130px 50px at center 70px);
}
</style>
<div class="tutorial shape">
<img src="https://www.tutorialspoint.com/images/logo.png">
</div>
</body>
</html>
When the script gets executed, it will generate an output consisting of an image along with a shape drawn on the image displayed on the webpage.
730 Views
To Continue Learning Please Login