如何绘制对角线div？

Question

如何绘制对角线div？

uSe*_*AhA 6 html css html5 css3

如何div在CSS中绘制对角线？谷歌只揭示了如何绘制对角线"线条",但我无法理解如何制作对齐线div.

在下图中,蓝色部分是div:

在此输入图像描述

Answer 1

Has*_*ami 15

您可以使用CSS3转换 skewY()函数,父值为正值,子包装元素为负值,以实现效果.

.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);
}

Run Code Online (Sandbox Code Playgroud)

工作演示.

从规格:

skewY() 指定沿Y轴按给定角度的2D倾斜变换.

值得注意的是,使用skewY()不会改变转换元素的宽度.

此外介意的孩子选择.最好使用直接子选择器 .parent > .child而不是后代选择器来否定子元素的转换.

Answer 2

Alb*_*ign 5

使用背景图像的非常酷的代码： https://codepen.io/PositionRelativ/pen/Ichrg

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

Run Code Online (Sandbox Code Playgroud)

Answer 3

小智 5

我使用了 Clip-path 来获得相同的结果。这是我的代码

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%;
}

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，6 月前
查看次数：	18802 次
最近记录：	7 年，6 月前