【css】用渐变模拟边框制作四周切角的div

看图效果，


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      clip-path: polygon(
        15px 0, calc(100% - 15px) 0,
        100% 15px, 100% calc(100% - 15px),
        calc(100% - 15px) 100%,
        15px 100%,
        0 calc(100% - 15px),
        0 15px
      );
 
      background-image: linear-gradient(-45deg, #4C829A 10px, #00000000 10px),
      linear-gradient(45deg, #4C829A 10px, #00000000 10px),
      linear-gradient(135deg, #4C829A 10px, #00000000 10px ),
      linear-gradient(-135deg, #4C829A 10px, #00000000 10px);
      background-position: bottom right, bottom left, top left, top right;
      background-size: 15px 15px ;
      background-repeat: no-repeat;
      border: solid 1px #4C829A;
      padding: 15px;
      background-color: #f8d6e0;
    }
  </style>
</head>
<body>
<div>fsdfdsfdfddf</div>
</body>
</html>

相关阅读:
CSS 之优雅的垂直居中
QML的语法——样式表QSS
RobotFramework 读取Excel文件
【JavaEE基础与高级第62章】Java中的XML介紹使用、XML的约束、XML的解析、XPath使用
uniapp iOS 真机调试
建造者模式
vue 模板应用
K8S架构原理
wireshark常见使用表达式
C语言实验一熟悉C程序的环境

原文地址：https://blog.csdn.net/qq_33014695/article/details/125444229