三角形绘制(使用Less封装)

最新推荐文章于 2024-06-20 17:28:13 发布

程序猿阿嘴

最新推荐文章于 2024-06-20 17:28:13 发布

阅读量243

点赞数

分类专栏：前端文章标签：前端 css

本文链接：https://blog.csdn.net/aniudunaichiji/article/details/123967268

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

学习内容：

三角形的绘制在开发中也是很常见，特别是上下左右四个方向的三角形，每次编写的时候代码都非常冗余，会有不少重复代码，我们可以使用 Less 传入参数的形式，控制三角形的样式和方向，再使用的时候拿去直接用，在此记录一下

下载Easy Less插件：Easy Less能把less自动转换为css
在这里插入图片描述

less文件：

//less文件
.triangle(@_, @width, @color) {
  width: 0;
  height: 0;
  border-style: solid;
}
.triangle(Bottom, @width, @color) {
  border-width: @width;
  border-color: @color transparent transparent transparent;
}
.triangle(Left, @width, @color) {
  border-width: @width;
  border-color: transparent @color transparent transparent;
}
.triangle(Top, @width, @color) {
  border-width: @width;
  border-color: transparent transparent @color transparent;
}
.triangle(Right, @width, @color) {
  border-width: @width;
  border-color: transparent transparent transparent @color;
}

.box {
  p {
  	//根据需要更改三角形的样式
  	.triangle(Top, 100px, blue);
  }
}

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <p></p>
    </div>
</body>

</html>