【LESS系列】三角形Mixins
又是一篇自 W3CPLUS 中转化而来的文章。
和 W3CPLUS 上的做法，在设计上最大的不同就在于，这里我用的是多个 Mixins 函数来实现。
先总结这种做法的特点：
需要额外的标签来实现，因此可以在同一容器中插入多个三角，并且支持低版本浏览器
使用 Mixins 函数名来区分不同的三角，每个 Mixins 函数固定包含4个参数，规律已经在代码注释中说明，还是很好掌握的
P 前缀开头的是名义私有 Mixins ，供库本身调用。虽然也能外部调用，但实际意义不大。
因为我不想用太多的参数来区分不同的三角，觉得用 Mixins 函数名来区分更为直观、好记，所以也没有用的名义私有 Mixins，而不是通过控制作用域来实现真正的私有 Mixins。
多个 Mixins 函数的实现方式还有个好处，就是每个 Mixins 函数的实现都很简单直观，没有很复杂的逻辑，所以阅读起来感觉也是相对轻松点。
功能不算特别丰富，但基本能满足日常对与三角的使用。如果想要 just mobile ，且不需要同一容器中插入多个三角，可以改造成伪元素版，相信这对 LESS Developer 来说并不是难事。
/* LESS triangle Mixins 代码，命名为triangle.less */ /* triangle 系列 Mixins Mixins 名称中的 left ，right ，top ，bottom 描述的是三角形中90度的那个角的指向 凡是带 P 前缀的 Mixins 函数，都是名义私有 Mixins 函数，虽然也能调用，但单独调用它并无实质意义... 参数说明: @size【必传】 三角的大小 @color【必传】 三角的颜色 @offsetSide【必传】 调整位置的匹配模式 如果 Mixins 名称是以 top 或者 bottom 为结尾，那此参数就调整水平位置，对应取值分别为 left 或者 right 如果 Mixins 名称是以 left 或者 right 为结尾，那此参数就调整垂直位置，对应取值分别为 top 或者 bottom @offset 三角的位置，根据 @offsetSide 参数的取值，以对应的 CSS 属性调整三角形的所在位置 */ .P-triangle-el-simple(){ display: block; width: 0; height: 0; position: absolute; } .P-triangle(@size){ border: (@size / 2) solid transparent; } .P-triangle-border(left){ border-color: transparent @color transparent transparent; border-left-width: 0; } .P-triangle-border(right){ border-color: transparent transparent transparent @color; border-right-width: 0; } .P-triangle-border(top){ border-color: transparent transparent @color transparent; border-top-width: 0; } .P-triangle-border(bottom){ border-color: @color transparent transparent transparent; border-bottom-width: 0; } .P-triangle-border(leftTop){ border-top: @size solid @color; border-left: 0 solid transparent; } .P-triangle-border(rightTop){ border-top: @size solid @color; border-right: 0 solid transparent; } .P-triangle-border(leftBottom){ border-bottom: @size solid @color; border-left: 0 solid transparent; } .P-triangle-border(rightBottom){ border-bottom: @size solid @color; border-right: 0 solid transparent; } .triangle-left(@size, @color, top, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(left); right: 100%; top: @offset; } .triangle-left(@size, @color, bottom, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(left); right: 100%; bottom: @offset; } .triangle-inner-left(@size, @color, top, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(left); right: 0; top: @offset; } .triangle-inner-left(@size, @color, bottom, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(left); right: 0; bottom: @offset; } .triangle-right(@size, @color, top, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(right); left: 100%; top: @offset; } .triangle-right(@size, @color, bottom, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(right); left: 100%; bottom: @offset; } .triangle-inner-right(@size, @color, top, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(right); left: 0; top: @offset; } .triangle-inner-right(@size, @color, bottom, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(right); left: 0; bottom: @offset; } .triangle-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(top); bottom: 100%; left: @offset; } .triangle-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(top); bottom: 100%; right: @offset; } .triangle-inner-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(top); bottom: 0; left: @offset; } .triangle-inner-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(top); bottom: 0; right: @offset; } .triangle-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(bottom); top: 100%; left: @offset; } .triangle-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(bottom); top: 100%; right: @offset; } .triangle-inner-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(bottom); top: 0; left: @offset; } .triangle-inner-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size); .P-triangle-border(bottom); top: 0; right: @offset; } .triangle-left-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftTop); top: 100%; left: @offset; } .triangle-left-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftTop); top: 100%; right: @offset; } .triangle-inner-left-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftTop); top: 0; left: @offset; } .triangle-inner-left-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftTop); top: 0; right: @offset; } .triangle-right-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightTop); top: 100%; left: @offset; } .triangle-right-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightTop); top: 100%; right: @offset; } .triangle-inner-right-top(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightTop); top: 0; left: @offset; } .triangle-inner-right-top(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightTop); top: 0; right: @offset; } .triangle-left-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftBottom); bottom: 100%; left: @offset; } .triangle-left-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftBottom); bottom: 100%; right: @offset; } .triangle-inner-left-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftBottom); bottom: 0; left: @offset; } .triangle-inner-left-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(leftBottom); bottom: 0; right: @offset; } .triangle-right-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightBottom); bottom: 100%; left: @offset; } .triangle-right-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightBottom); bottom: 100%; right: @offset; } .triangle-inner-right-bottom(@size, @color, left, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightBottom); bottom: 0; left: @offset; } .triangle-inner-right-bottom(@size, @color, right, @offset: 0){ .P-triangle-el-simple(); .P-triangle(@size * 2); .P-triangle-border(rightBottom); bottom: 0; right: @offset; }
/* 实例要用到的LESS代码 */ @import "triangle.less";
body { background: #fff; } .wrap-a, .wrap-b{ display: inline-block; background: #f36; margin: 20px; padding: 10px; width: 240px; height: 45px; line-height: 45px; color: #fff; text-align: center; position: relative; } .wrap-b{ background: #ff0; color: #f36; } .top-l{ .triangle-top(20px, #f36, left); } .left-b{ .triangle-left(20px, #f36, bottom); } .bottom-r{ .triangle-bottom(20px, #f36, right); } .right-t{ .triangle-right(20px, #f36, top); } .top-r{ .triangle-top(20px, #f36, right); } .left-t{ .triangle-left(20px, #f36, top); } .bottom-l{ .triangle-bottom(20px, #f36, left); } .right-b{ .triangle-right(20px, #f36, bottom); } .top-i-l{ .triangle-inner-top(20px, #f36, left); } .left-i-b{ .triangle-inner-left(20px, #f36, bottom); } .bottom-i-r{ .triangle-inner-bottom(20px, #f36, right); } .right-i-t{ .triangle-inner-right(20px, #f36, top); } .top-i-r{ .triangle-inner-top(20px, #f36, right); } .left-i-t{ .triangle-inner-left(20px, #f36, top); } .bottom-i-l{ .triangle-inner-bottom(20px, #f36, left); } .right-i-b{ .triangle-inner-right(20px, #f36, bottom); } .leftTop-r{ .triangle-left-top(20px, #f36, right); } .rightTop-l{ .triangle-right-top(20px, #f36, left); } .leftBottom-r{ .triangle-left-bottom(20px, #f36, right); } .rightBottom-l{ .triangle-right-bottom(20px, #f36, left); } .leftTop-l{ .triangle-left-top(20px, #f36, left); } .rightTop-r{ .triangle-right-top(20px, #f36, right); } .leftBottom-l{ .triangle-left-bottom(20px, #f36, left); } .rightBottom-r{ .triangle-right-bottom(20px, #f36, right); } .leftTop-i-r{ .triangle-inner-left-top(20px, #f36, right); } .rightTop-i-l{ .triangle-inner-right-top(20px, #f36, left); } .leftBottom-i-r{ .triangle-inner-left-bottom(20px, #f36, right); } .rightBottom-i-l{ .triangle-inner-right-bottom(20px, #f36, left); } .leftTop-i-l{ .triangle-inner-left-top(20px, #f36, left); } .rightTop-i-r{ .triangle-inner-right-top(20px, #f36, right); } .leftBottom-i-l{ .triangle-inner-left-bottom(20px, #f36, left); } .rightBottom-i-r{ .triangle-inner-right-bottom(20px, #f36, right); }
<!-- 实例要用到的HTML代码，引入的CSS是上面两个LESS编译生成出的CSS文件 --> <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <link type="text/css" rel="stylesheet" href="test.css"> </head> <body> <div class="wrap-a"> EL1 <i class="top-r"></i> <i class="left-t"></i> <i class="bottom-l"></i> <i class="right-b"></i> </div> <div class="wrap-a"> EL2 <i class="top-l"></i> <i class="left-b"></i> <i class="bottom-r"></i> <i class="right-t"></i> </div> <div class="wrap-b"> EL3 <i class="top-i-r"></i> <i class="left-i-t"></i> <i class="bottom-i-l"></i> <i class="right-i-b"></i> </div> <div class="wrap-b"> EL4 <i class="top-i-l"></i> <i class="left-i-b"></i> <i class="bottom-i-r"></i> <i class="right-i-t"></i> </div> <div class="wrap-a"> EL5 <i class="leftTop-r"></i> <i class="rightTop-l"></i> <i class="leftBottom-r"></i> <i class="rightBottom-l"></i> </div> <div class="wrap-a"> EL6 <i class="leftTop-l"></i> <i class="rightTop-r"></i> <i class="leftBottom-l"></i> <i class="rightBottom-r"></i> </div> <div class="wrap-b"> EL7 <i class="leftTop-i-r"></i> <i class="rightTop-i-l"></i> <i class="leftBottom-i-r"></i> <i class="rightBottom-i-l"></i> </div> <div class="wrap-b"> EL8 <i class="leftTop-i-l"></i> <i class="rightTop-i-r"></i> <i class="leftBottom-i-l"></i> <i class="rightBottom-i-r"></i> </div> </body> </html>
最后补一发效果图：
