前端的日常开发小技巧总结（一）

日常开发中的小劳绩

前言

本专栏，主要记录在日常开发当中，学习和劳绩到的一些小诀窍，通过日常的总结与汇总，日积月累~让自己的专业能力可以或许得以提升，同时也能使自己和看到这些的人，少走一些弯路
-------------只要日积月累，微小的积极终将汇聚成巨大的进步----------------

---

一、使用elementUI，绘制直角梯形

在前端开发中，UI大佬为了让页面更悦目、更具有观赏性，总会设计一些异形按钮，区别于正常的按钮形状，对于用户很友好，但对于开发者而言，却必要花费更多的精力去实现它
这次在实际开发中，就遇到了类似的情形，为了页面更具观赏性，设计师将正常的Tab切换按钮，设计成了直角梯形与平行四边形
如图所示：

正常开发过程中，为了实现上图效果，一般就是使用CSS3样式，然后手写Tab切换效果
但这次，只必要elementUI 的按钮组件+一些属性的修改就可完成

• 实现思绪
  HTML部门：使用 ElementUI 的 el-button 组件。
  CSS部门：利用 clip-path 来实现直角梯形的形状。
  我们将使用 clip-path 来裁剪按钮，使其成为直角梯形。
  

梯形代码如下：

1.   <div class="trapezoid-button-container">
2.     <el-button class="trapezoid-button">
3.       直角梯形按钮
4.     </el-button>
5.   </div>
6. <style scoped>
7. .trapezoid-button-container {
8.   display: flex;
9.   justify-content: center;
10.   align-items: center;
11.   height: 100vh;
12. }
14. .trapezoid-button {
15.   width: 100px;
16.   height: 50px;
17.   line-height: 50px;
18.   background-color: #409EFF;
19.   color: white;
20.   text-align: center;
21.   font-size: 16px;
22.   border: none;
23.   clip-path: polygon(0 100%, 100% 100%, 70% 0, 0 0);
24.   cursor: pointer;
25. }
27. .trapezoid-button:hover {
28.   background-color: #66b1ff;
29. }
30. </style>

复制代码

• 关键点阐明
  clip-path: 我们使用了 clip-path 来裁剪元素，使其呈现为直角梯形的形状。polygon(0 100%, 100% 100%, 70% 0, 0 0) 定义了这个梯形的四个极点，分别是：
  (0, 100%)：左下角
  (100%, 100%)：右下角
  (70%, 0)：右上角（上边长为 70% 即 70px）
  (0, 0)：左上角
  按钮样式：我们设置了按钮的宽度为 100px，高度为 50px，这与梯形的底边和高度相匹配。
  hover 效果：当按钮被悬停时，配景颜色会变为更亮的蓝色。
  

二、使用elementUI，绘制平行四边形

如上图所示，梯形按钮绘制完毕，接下来绘制平行四边形
代码如下（示例）：

1. <template>
2.   <div class="parallelogram-button-container">
3.     <el-button class="parallelogram-button">
4.       <span class="button-text">按钮2</span>
5.     </el-button>
6.   </div>
7. </template>
9. <script>
10. export default {
11.   name: "ParallelogramButton",
12. };
13. </script>
15. <style scoped>
16. .parallelogram-button-container {
17.   display: flex;
18.   justify-content: center;
19.   align-items: center;
20.   height: 100vh;
21. }
23. .parallelogram-button {
24.   display: inline-block;
25.   width: 100px;
26.   height: 40px;
27.   background-color: #409EFF;
28.   color: white;
29.   text-align: center;
30.   line-height: 40px;
31.   border: none;
32.   cursor: pointer;
33.   transform: skew(-20deg); /* 倾斜生成平行四边形 */
34. }
36. .parallelogram-button:hover {
37.   background-color: #66b1ff;
38. }
39. </style>

复制代码

关键点阐明
transform: skew(-20deg)：使用 CSS 的 transform 属性中的 skew 函数将按钮倾斜。skew(-20deg) 表现将按钮沿着 X 轴倾斜 20 度，从而形成平行四边形的效果。可以根据需求调整倾斜角度。
宽度与高度：按钮的宽度为 100px，高度为 40px，这是通过 width 和 height 来控制的。
居中对齐：使用了 line-height: 40px 使得按钮内部的笔墨居中。
别的留意一点，由于是整体倾斜，所以按钮中的笔墨也会跟着倾斜，这与原型图的设计并不相符，为了解决这一问题，可以给笔墨单独设置新的倾斜角度，使其可以或许回正

1. /* 抵消按钮的倾斜，使文字保持水平 */
2. .button-text {
3.   display: inline-block;
4.   transform: skew(20deg); /* 抵消按钮倾斜 */
5. }

复制代码

总结

就如许，简简朴单的几行代码，就实现了在vue2中，使用elementUI 绘制直角梯形和平行四边形的需求
------------------------苦心人，天不负，卧薪尝胆，三千越甲可吞吴
有志者，事竟成，破釜沉舟，百二秦关终属楚-----------------------

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。