Creating Diagonal top of the div using CSS - html

Question

I am working on a project where I want to create a diagonal div using CSS like in this image:

Answer 1

You can use the css "clip path". It's pretty simple to understand.
#shape {
-webkit-clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0 55%, 100% 0%, 100% 100%, 0% 100%);
width:200px;
height:200px;
background-color:black;
}
<div id='shape'></div>

Answer 2

.myDiv {
width: 400px;
height: 400px;
border: 1px solid #000;
background-image: url('https://pbs.twimg.com/profile_images/739247958340698114/fVKY9fOv.jpg');
position: absolute;
overflow: hidden;
}
.myDiv:after {
content: '';
position: absolute;
z-index: 4;
width: 0;
height: 0;
border-bottom: 800px solid red;
border-left: 800px solid transparent;
top: -40%;
left: -50%;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}
p {
position: relative;
top: 70%;
z-index: 5;
font-size: 35px;
text-align: center;
}
<div class="myDiv">
<p>Hello World!</p>
</div>

Answer 3

Using Bootstrap and Transition Skew CSS Property https://jsfiddle.net/oocputgz/24/
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="blog-post-image">
<img src="https://i.imgsafe.org/20ff17cabf.jpg" class="img-responsive center-block" />
</div>
<div class="post-detail_container">
<div class="sperator"></div>
<div class="post-content">
<h3 class="post-title">
Hello World
</h3>
</div>
</div>
</div>
</div>
</div>
CSS Styling:
.post-detail_container
{
position:relative;
}
#blog-items .item
{
padding:0px 15px;
}
.sperator
{
position: absolute;
top: 0;
width: 100%;
height: 100px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: skew(0, -7deg);
-moz-transform: skew(0, -7deg);
-ms-transform: skew(0, -7deg);
-o-transform: skew(0, -7deg);
transform: skew(0, -7deg);
background: red;
}
.post-content
{
background-color:red;
padding:15px 15px;
min-height: 300px;
}
.post-title
{
font-size: 40px;
line-height: 24px;
margin-bottom: 2px;
color: #fff;
text-align: center;
margin-top: 88px;
}