如何利用 clip-path 实现等腰梯形边框？

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何利用 clip-path 实现等腰梯形边框？》，涉及到，有需要的可以收藏一下

利用 clip-path 绘制等腰梯形边框

在 css 中绘制等腰梯形边框，可以使用 clip-path 属性。原理是通过绘制两个轮廓相似的梯形，其中上面的梯形比下面的稍小，并将其通过 z-index 或背景叠加在一起。

代码示例

.test2 {
  width: 115px;
  height: 230px;
  position: relative;
  top: -4px;
  background: #4FA6E5;
  border-bottom: 1px solid #4FA6E5;
  clip-path: polygon(0 55px, 100% 0, 100% 100%, 0 calc(100% - 55px));
  box-sizing: border-box;
}

.test2:after {
  content: '';
  padding: 0;
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #082F4C;
  clip-path: polygon(2px 57px, 100% 2px, 100% calc(100% - 2px), 2px calc(100% - 57px));
}

效果演示

[jsbin 示例](https://jsbin.com/mogirok/edit?css,output)

这种方法可以实现等腰梯形边框，并可以将其与外侧的长方形边框连接在一起。

今天关于《如何利用 clip-path 实现等腰梯形边框？》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！