css实现不规则图形

1.无边框，四切角，纯色背景

border: none;

background: #289eef;

clip-path: polygon(

10px 0, calc(100% - 10px) 0,

100% 10px, 100% calc(100% - 10px),

calc(100% - 10px) 100%, 10px 100%,

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

2.加边框，切角部分边框也会被切掉

border: none;

background: #289eef;

clip-path: polygon(

6px 0, calc(100% - 6px) 0,

100% 6px, 100% calc(100% - 6px),

calc(100% - 6px) 100%, 6px 100%,

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

3.完整边框

border: none;

background: #289eef;

clip-path: polygon(

6px 0, calc(100% - 6px) 0,

100% 6px, 100% calc(100% - 6px),

calc(100% - 6px) 100%, 6px 100%,

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

background:linear-gradient(-45deg,#289eef 4px, #0c4e81 0) bottom right,

            linear-gradient(45deg,#289eef 4px, #0c4e81 0) bottom left,

              linear-gradient(135deg,#289eef 4px, #0c4e81 0) top left,

              linear-gradient(-135deg,#289eef 4px,#0c4e81 0) top right;

    background-size: 50% 51%;

    background-repeat: no-repeat;

border: solid 2px #289eef;