我如何绘制对角线div？ [英] How do I draw a Diagonal div?

问题描述

如何在CSS中绘制对角线 div ？ Google只会揭示如何绘制对角线条，但我无法理解如何针对 div 的。

在下面的图片中，蓝色部分是 div ：

解决方案

使用 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）; 
} 
  

WORKING DEMO 。

从 spec ：
$ b

skewY（）指定沿着Y轴以
给定角度进行的二维偏斜变换。

值得注意的是，使用 skewY （） 不会改变已转换元素的宽度。

另外介绍 em> child 选择器。最好直接使用子选择器 .parent> .child 而不是否定子元素元素的转换。

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:

解决方案

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.

这篇关于我如何绘制对角线div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！