【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:;

  height:;

  position: absolute;

}

.P-triangle(@size){

  border: (@size / 2) solid transparent;

}

.P-triangle-border(left){

  border-color: transparent @color transparent transparent;

  border-left-width:;

}

.P-triangle-border(right){

  border-color: transparent transparent transparent @color;

  border-right-width:;

}

.P-triangle-border(top){

  border-color: transparent transparent @color transparent;

  border-top-width:;

}

.P-triangle-border(bottom){

  border-color: @color transparent transparent transparent;

  border-bottom-width:;

}

.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:;

  top: @offset;

}

.triangle-inner-left(@size, @color, bottom, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size);

  .P-triangle-border(left);

  right:;

  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:;

  top: @offset;

}

.triangle-inner-right(@size, @color, bottom, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size);

  .P-triangle-border(right);

  left:;

  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:;

  left: @offset;

}

.triangle-inner-top(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size);

  .P-triangle-border(top);

  bottom:;

  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:;

  left: @offset;

}

.triangle-inner-bottom(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size);

  .P-triangle-border(bottom);

  top:;

  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:;

  left: @offset;

}

.triangle-inner-left-top(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size * 2);

  .P-triangle-border(leftTop);

  top:;

  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:;

  left: @offset;

}

.triangle-inner-right-top(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size * 2);

  .P-triangle-border(rightTop);

  top:;

  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:;

  left: @offset;

}

.triangle-inner-left-bottom(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size * 2);

  .P-triangle-border(leftBottom);

  bottom:;

  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:;

  left: @offset;

}

.triangle-inner-right-bottom(@size, @color, right, @offset: 0){

  .P-triangle-el-simple();

  .P-triangle(@size * 2);

  .P-triangle-border(rightBottom);

  bottom:;

  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>

最后补一发效果图：

【LESS系列】三角形Mixins

【LESS系列】三角形Mixins的相关教程结束。

相关推荐

Flutter系列文章-Flutter 插件开发

spring-mvc 系列：注解开发（SpringMVCConfig、SpringConfig、AbstractAnnotationConfigDispatcherServletInitializer详细配置）

3、数据库：Oracle部署 - 系统部署系列文章

MySQL系列(七)--SQL优化的步骤

Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

「Vue系列」之Vue2实现当前组件重新加载

4、数据库：MySQL部署 - 系统部署系列文章

iOS开发系列--Swift语言