Triangle Image Shape using CSS | Image Shape using CSS Clip Path

Creative CSS Effects | December 12, 2020

This tutorial video to learn how to create a Triangle Image Shape using CSS clip path.

Video tutorial of Triangle Image Shape using CSS

This tutorial video to learn how to create a Triangle Image Shape using CSS clip path.

Triangle Image Shape using CSS [Source Codes]

This source code can help you to create Triangle Image Shape using CSS.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>


  <div class="shape">
    <img src="images/pic1.jpg">
  </div> 




</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #122325;
	display: flex;
	align-items: center;
	justify-content: space-around;
	height: 100vh;
}

div.shape {
	max-width: 500px;
	height: 500px;
	clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}