Umar Tanveer Umar Tanveer - 1 month ago 4
CSS Question

Creating Diagonal top of the div using CSS

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

enter image description here


.myDiv {
	width: 400px;
	height: 400px;
	border: 1px solid #000;
	background-image: url('');
	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>