之前知道border可以制造三角形、多边形外，最近无意间看到一个关于border-radius使用，可以创造出一些特殊的不规则图形。因此很多不用通过图片就能轻易实现效果，而且兼容性也比较好。

1、border-radius

• border-radius 允许你设置元素的外边框圆角(基本用法)
• border-radius 属性跟其他border属性一样，都可以设置左上角，右上角，右下角，左下角，也可以设置8个属性(重点特色差异化)

• 除了一般给图像设置圆形外，还有另类使用eg:

    <div style="
    background-image: linear-gradient(blue 0%,yellow 50%,green 100%);
    width: 500px;height: 500px;
    border-radius: 0% 100% 2% 98% / 0% 99% 1% 100%;"></div>

可以通过9elements.github.io/fancy-borde… 去动态设置8个角度，达到生成不规则图形

2、border-width、border-style、border-color、transparent

一般三角形、多边形，都可以通过这个属性进行组合，只要其他边颜色设置透明就好

    <div style="
width: 0;
height: 0;
border-style: solid;
border-width: 200px 0 0 200px;
border-color: transparent transparent transparent #007bff;"></div>

<div style="
    width: 60px;
    border-top: 60px solid blue;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
"></div>

3、拓展多边形生成

• 利用linear-gradient,多重线性渐变实现切角

    <div style="
    width: 140px;
    height: 140px;
    padding: 140px;
    background: linear-gradient(135deg, transparent 40px, #007bff 0) top left,
        linear-gradient(-135deg, transparent 40px, #007bff 0) top right,
        linear-gradient(-45deg, transparent 40px, #007bff 0) bottom right,
        linear-gradient(45deg, transparent 40px, #007bff 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
"></div>

• 利用clip-path进行裁切图形，实现任意多边形或者不规则圆形生成

    <div style="
    width: 140px;
    height: 140px;
background: blue;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
"></div>

4、参考

不规则图形

多边形

各类图形