CODEWITHSUNDEEP
htmlcss
uSeRnAmEhAhAhAhAhA
uSeRnAmEhAhAhAhAhA

Reputation: 2587

How do I draw a Diagonal div?

How do I draw a diagonal div in CSS? Google only reveals how to draw diagonal "lines", but I could not understand how to make that for div's.

In the pic below, the blue part is the div:

enter image description here

Upvotes: 15

Views: 40250

Answers (4)

Pushkal Singh
Pushkal Singh

Reputation: 57

I have used clip-path to get the same result. here is my code

body
{
	margin: 0;
	padding: 0;
}
.polygon
{
	height: 100vh;
	background: #00A2E8;
	clip-path: polygon(0 50%, 100% 0,100% 50%,0 100%);
	position: relative;
}
.content
{
	position: absolute;
	top: 50%;
	left: 20%;
}
<html>
	<head>
		<title>Clippath</title>
		<link rel="stylesheet" type="text/css" href="clip.css">
	</head>
	<body>
		<div class="polygon">
			<div class="content">
			<h2 class="head">heading</h2>
			<p>lorem ipsum dolar sit amet lol</p>
			</div>
		
		</div>
	</body>
</html>

Upvotes: 5

Albuquerque Web Design
Albuquerque Web Design

Reputation: 421

Really cool codes using background-image: https://codepen.io/PositionRelativ/pen/Ichrg

 .one{
   background-color: #013A6B;
   background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
   min-height: 500px;
 }

Upvotes: 6

Hashem Qolami
Hashem Qolami

Reputation: 99484

You could use CSS3 transform skewY() function with positive value for the parent and negative value for the child wrapper element to achieve the effect.

.parent {
  -webkit-transform: skewY(-5deg);
  -moz-transform: skewY(-5deg);
  -ms-transform: skewY(-5deg);
  -o-transform: skewY(-5deg);
  transform: skewY(-5deg);
}

.parent > .child {
  -webkit-transform: skewY(5deg);
  -moz-transform: skewY(5deg);
  -ms-transform: skewY(5deg);
  -o-transform: skewY(5deg);
  transform: skewY(5deg);
}

WORKING DEMO.

From the spec:

skewY() specifies a 2D skew transformation along the Y axis by the given angle.

It's worth noting that the using skewY() won't change the width of the transformed elements.

Also mind the child selector. It's better to use direct child selector .parent > .child rather than descendant selector to negate the transform on the child element.

Upvotes: 26

nikitz
nikitz

Reputation: 1091

Use :

transform: rotate(45deg);

Just add prefixes for all browsers (-webKit, -moz, ... )

Upvotes: 4

Related Questions