html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
前言
这几个月做了很多前端工作，其中一个需求还是蛮头疼，UI给的图上面的四边形是一个带斜边的，直接用背景图可以实现，但是会出现各种布局的问题，比如内容太大了，边框不会跟着扩大，废话不多说，这里写一些如何利用css话四边形带有斜边，并且给斜边加边框，在这之前，先简单说一下需要用到的函数
linear-gradient()函数
grad {
background-image: linear-gradient(red, yellow, blue);
}
看上面的代码是从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色。
这里大概就知道了linear-gradient是用来画渐变用的。并且可以指定颜色以及方向。
clip-path函数
这个函数我也不是很懂，大概就是裁剪路径，配合函数后面的做标参数，对四边形进行裁剪，这里是配合polygon使用。
实现代码
clip-path: polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),
calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);
background:linear-gradient(-45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom right,
linear-gradient(45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom left,
linear-gradient(135deg,#4C829A 0px, rgba(216,236,255,0.05) 0) top left,
linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;
background-repeat: no-repeat;
border: solid 1px #4C829A;
上
049030f2e2963d2c5149fc2d052ae560.png
面这个样式就可以实现了，这是我实现的效果。
注意，我不光实现了切角，还实现了，切角以后，边框也贴着斜边。
代码解释
background:linear-gradient(-45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom right,
linear-gradient(45deg,#4C829A 0px, rgba(216,236,255,0.05) 0) bottom left,
linear-gradient(135deg,#4C829A 0px, rgba(216,236,255,0.05) 0) top left,
linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;
先解释这个代码。 linear-gradient最后面的是方向，这里有四个方向。不细说了、
其中第一个参数135deg就是角度，比如 top right;即上到右，切-135度，
第二个参数是4C829A 是边框的边框的颜色，
第三个参数0px，是你要切多高。这个地方经过演算，是这里的值，看图。
8cba2255f430d9845f6b4b878acaea71.png
虚线部分即为你设置的值，这个值是以顶点为起点，45度角延长，
第四个参数,rgba(216,236,255,0.05) 前面三个是是四边形的填充颜色，最后一个0.05是填充颜色的透明度，这里也可以设置background-size: 50% 50%;意思即为将四边形平均分为四分，每一份的颜色可以单独设置，这里不做深究，这里我也没用到
第五个参数0表示渐变渲染颜色，这里写0，表示不让他渐变渲染，如果需要渐变渲染颜色，并且四边形需要不同的颜色，就可以用到上面的background-size属性。
第六个属性 top right表示方向。代表你要从哪里往哪里切
上面说了第一个要点，能够实现四边形切边，但是边框还是四边，没有切边。
clip-path: polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),
calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);
这段代码，可以通过裁剪的方式，实现边框也跟着切边。
42fb9a9f9b826d8fc44f39df91a81529.png
经过反复实验，发现 polygon(0 0, calc(100% - 15px) 0,100% 15px, 100% calc(100% - 0px),
calc(100% - 0px) 100%, 0px 100%,0 calc(100% - 0px),0 0px);中的八个点，按照顺序，分别是图中的1-8，好像没什么规律，这里可能会有问题，具体大家可自行演算。可以看到，我切的斜边是右上角，就是切2号点和3号点。2号点的坐标本来是100%和0，其控制的是上面那条边的右边坐标点，这里减去15px，就是切割后的坐标点，3号点位同理，纵坐标切15px，然后可以大概算出沿着直角三角形做垂直线，大概可以算出其距离时10.6px。也就是 linear-gradient(-135deg,#4C829A 10px,rgba(216,236,255,0.05) 0) top right;这里设置的10px(大致结果)，下面这张图，可以帮助大家理解怎么算的。
e5b76d4bfc25827e389f0bb1c5aebc67.png
当然，你也可以先设置你要切多少个px，然后算出坐标值是多少。但是这个算出来的结果，可能跟实际效果还是有所出入，具体还需要自己在计算值得上下进行调整
详细可看：https://blog.csdn.net/weixin_31639069/article/details/118010862
