CSS 多边形

平行四边形

我们可以通过skew()的变形属性来对这个矩形进行斜向拉伸。trasnsform:skewX(-45deg);这样会导致内容也发生斜向变形。

嵌套元素方案：我们可以对内容在应用一次反向的skew()变形，从而抵消容器的变形效果。如果想把这个效果应用到一个默认显示为行内的元素，需要把它的displlay属性设置为inline-blick或block，否则变形是不会生效的。这一点对内层的元素也是适用的。

伪元素解决方案：把所有样式（背景，边框等）应用到伪元素上，然后对伪元素进行变形。因为我们的内容并不是包含在伪元素里地，所以内容并不会受到变形的影响。

伪元素应该自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单地方法是给宿主元素应用position:relative样式，并为伪元素设置position:absolute,然后再把所有偏移量设置为零，以便它在水平和垂直方向上都被拉伸至宿主元素的尺寸。

菱形图片

嵌套元素方案：需要把图片用一个div包裹起来，然后对其应用相反的rotate()变形样式：

clip-path属性把元素裁剪为我们想要的任何形状。polugon()函数指定一个菱形。实际上它允许我们用一系列坐标点来指定任意的多边形。clip-path:poly(50% 0,100% 50%,50% 100%,0 50%);clip-path还可以参与动画，只有我们的动画是在同一形状函数之间进行的。

切角效果

一种方案：使用背景图片盖住元素来达到目的。比如使用三角形盖住元素的顶角来模拟切角效果。

CSS渐变：background: #58a;

background:

    linear-gradient(135deg, transparent 15px, #58a 0)

        top left,

    linear-gradient(-135deg, transparent 15px, #58a 0)

        top right,

    linear-gradient(-45deg, transparent 15px, #58a 0)

        bottom right,

    linear-gradient(45deg, transparent 15px, #58a 0)

        bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

弧形切角：

background: #58a;

background:

    radial-gradient(circle at top left,

             transparent 15px, #58a 0) top left,

    radial-gradient(circle at top right,

             transparent 15px, #58a 0) top right,

    radial-gradient(circle at bottom right,

             transparent 15px, #58a 0) bottom right,

    radial-gradient(circle at bottom left,

             transparent 15px, #58a 0) bottom left;

background-size: 50% 50%;

background-repeat: no-repeat;

内联SVG与border-image方案：

border: 20px solid #58a;

border-image: 1 url('data:image/svg+xml,\

    <svg xmlns="http://www.w3.org/2000/svg"\

         width="3" height="3" fill="%2358a">\

    <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\

    </svg>');

background: #58a;

background-clip: padding-box;

clip-path实现切角

 polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),

      calc(100% - 20px) 100%,

      20px 100%, 0 calc(100% - 20px), 0 20px);

切出一个多边形。个人感觉这种方式实现最方便，只是要考虑浏览器的支持。

梯形标签页

常用方式：使用精心设计的背景图片来实现梯形，或者使用边框来模拟梯形两侧的斜边。

使用3D旋转。

转载于:https://www.cnblogs.com/wlxll/p/7065692.html