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;