CSS Shapes: Creating Diamond Shape in CSS
Learn How to create Diamond Shape Design with CSS by creating four triangles with Flex Layout and Key CSS properties like border and margins.
Code Editor in use: Atom.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Building Diamond Shape in CSS</title>
<link rel=”stylesheet” href=”vikas.css” media=”screen” title=”no title” charset=”utf-8">
</head>
<body>
<div class=”container”>
<h1>Diamond Shape in CSS</h1>
<div class=”top-triangles”>
<div class=”one”>
</div>
<div class=”two”>
</div>
<div class=”three”>
</div>
</div>
<div class=”bottom-triangles”>
<div class=”four”>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0 auto;
}
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #00bcd4;
}
h1 {
background: transparent;
color: #e0f7fa;
padding: 20px;
margin: 30px;
border: 3px solid #e0f7fa;
border-radius: 5px;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
}
.top-triangles {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.bottom-trianles {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.one {
width: 0;
height: 0;
border-right: 75px solid transparent;
border-left: 75px solid transparent;
border-bottom: 100px solid #64b5f6;
}
.two {
margin-left: -75px;
width: 0;
height: 0;
border-right: 75px solid transparent;
border-left: 75px solid transparent;
border-top: 100px solid #2196f3;
}
.three {
margin-left: -75px;
width: 0;
height: 0;
border-right: 75px solid transparent;
border-left: 75px solid transparent;
border-bottom: 100px solid #1976d2;
}
.four {
width: 0;
height: 0;
border-top: 150px solid #0d47a1;
border-right: 150px solid transparent;
border-left: 150px solid transparent;
}
Please Subscribe to my Channel: http://tinyurl.com/hj4h3ep
