资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往

首页/文章专栏/CSS 搞事技巧：border+transparent

CSS 搞事技巧：border+transparent

nifhlheimr 发布于2019-08-29 18:37 / 2322人阅读

摘要：默认盒模型的正方形在上方已经说明了，正方形的被挤压为时就会得到三角形的效果。这里选择一种较为取巧的形式，因为这边使用的是行内样式，所以可以直接在它的上获取。面试前还是要为面试刷下题目的，不然真的容易懵

介绍

出门忘带电源线，快递到了终于可以继续水文章了。好不容易获得一个面试机会，面试官很 Nice，可惜的是当时处于懵逼状态，错过了大好的机会：

面试官：巴拉巴拉吧……

我：嗯，啊，这个，那（吱吱呜呜）……

面试官：你知道怎么绘制三角形嘛？

我：主要是利用了 border 和 transparent 这两个属性。其余边设置为 transparent，然后将对应的方向设置为需要的颜色即可，一般常用等边，等腰啊来装饰一下。

面试官：那你知道不等边三角形怎么写吗？

我：不就是那么写么（陷入懵逼状态），然后又迅速说用伪元素来模拟一下？

面试官：你分别设置下高度不就好了。

我：……

效果展示：

示例源码、在线示例

三角形原理

通过图形展示能够更明显显示出区别：

1. 简单的正方形

代码：

$square-size = 100px

.square
  width $square-size
  height $square-size
  border 5px solid
  border-color #893615 #E76B56 #A72310 #0C1F22

效果图：

加强一下效果：

$square-size = 100px
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22

可以清晰的看到每个边都是一个梯形。

2. 检查正方形

打开控制台即可：

可以看到中间的空白即为我们设置的 100 * 100 ，这是由于我们的盒模型（box-sizing）为 content-box 导致的结果。

那我们将其设置为 border-box ，查看其结果：

由 border-box 可知，由于两边 border 大小为 60，所以 60*2=120 > 100，内部的 width 即为 0。

3. 默认盒模型的正方形

在上方已经说明了，正方形的 size 被挤压为 0 时就会得到三角形的效果。

那么此处就在默认盒模型的情况下创建一个三角形：

$square-size = 0
$border-size = 60px

.square
  width $square-size
  height $square-size
  border $border-size solid
  border-color #893615 #E76B56 #A72310 #0C1F22

4. 隐藏不必的边

最后，生成三角形就水到渠成了（保留目标相反方向的颜色），举几个例子。

三角形开角向上：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-bottom-color #A72310

三角形开角向右：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-left-color #0C1F22

三角形开角向左上：

$square-size = 0
$border-size = 60px

.triangle
  width $square-size
  height $square-size
  border $border-size solid transparent
  border-left-color #0C1F22
  border-top-color #893615

三角形生成器

每次还要想一想怎么写三角形很麻烦，将其可视化，每次只需要点一点就创建一个三角形才是极好的。

友情提示：

以下涉及 Vue 相关概念

参考链接

0. 基本结构

.generate-triangle
  display flex
  .title
    margin 0
    padding 0
  .settings
    flex-basis 30%
  .exhibition
    flex auto
    background-color #cdd1d3 // 银鱼白

.settings
  display flex
  flex-direction column
  padding-top 12px
  .settings_direction,
  .settings_type,
  .settings_color
    display flex
    justify-content center
  .settings_type,
  .settings_color
    flex-basis 20%
  .settings_direction
    flex auto

.exhibition
  display flex
  flex-direction column
  padding-top 12px
  .rendering,
  .code
    display flex
    justify-content center
  .code
    flex-basis 35%
  .rendering
    flex auto

效果图：

1. 方向选择

在开始写一个三角形时，需要确定这个三角的朝向，如向上、向下、或向左上。这时候我们就需要一个点击的子组件来触发效果了：

export default {
  name: "triangle-direction",
  data: () => {
    return {
      active: "oblique0",
      directions: [
        {
          name: "oblique",
          single: ["top", "right", "bottom", "left"]
        },
        {
          name: "positive",
          single: ["top-left", "top-right", "bottom-right", "bottom-left"]
        }
      ]
    };
  },
  mounted() {
    this.changeDirection("top", "oblique0");
  },
  methods: {
    changeDirection(val, index) {
      this.active = index;
      this.$emit("getDirection", val);
    }
  }
};

效果图：

2. 类型选择

此处将三角形分为三种：等边三角形、等腰三角形、不等边三角形。

类型选择组件依赖于方向组件，需要验证传入的值，并且在不同的值会有不同的输出结果。在上文解释过，斜方向的三角形是由两个 border 组成，所以这种类型的将不提供等边的形式：

export default {
  name: "triangle-type",
  data: () => {
    return {
      active: 0,
      equilateral: false,
      triangleTypes: [
        {
          en: "equilateral",   
          zh: "等边"
        },
        {
          en: "isosceles",
          zh: "等腰"
        },
        {
          en: "scalene",
          zh: "不等边"
        }
      ]
    };
  },
  props: {
    type: {
      type: String,
      validator: function(val) {
        return [
          "top",
          "right",
          "left",
          "bottom",
          "top-left",
          "top-right",
          "bottom-left",
          "bottom-right"
        ].includes(val);
      }
    }
  },
  watch: {
    type: {
      handler: function(val) {
        const isPositive = ["top", "right", "left", "bottom"].includes(val);
        this.equilateral = isPositive;
        if (isPositive) {
          this.changeType("equilateral", 0);          
        } else {
          this.changeType("isosceles", 1);
        }
      },
      immediate: true
    }
  },
  methods: {
    changeType(item, index) {
      this.active = index;
      this.$emit("getType", item);
    }
  }
};

效果图：

3. 颜色选取

现在 input 提供了 type="color" 这一选项，制作一个颜色选择器还是很简单的，对于 input 可以使用之前提及的 CSS 搞事技巧：checkbox+label+selector 来隐藏它：


  
     {{color}}

export default {
  name: "color-picker",
  data: () => {
    return {
      color: "#000000"
    }
  },
  mounted() {
    this.changeColor();
  },
  methods: {
    changeColor() {
      this.$emit("getColor", this.color);
    }
  }
}

效果图：

4. 初步效果

效果图来依赖于三个数据：方向、类型及颜色。依次适配这三个即可。

首先完成，方向及颜色问题，先初步看一下效果图：

5. 宽高选取

在原理中说明了，三角形实际上是一个矩形隐藏了其余 border 形成的。以方向等边三角形为例子：若需要边长度为 50px 的的三角形，则根据勾股定理可得出：border-width: 0 28.87px 50px;

export default {
  name: "triangle-width",
  props: {
    type: {
      type: String,
      validator: function(val) {
        return ["equilateral", "isosceles", "scalene"].includes(val);
      }
    },
    direction: {
      type: String,
      validator: function(val) {
        return [
          "top",
          "right",
          "left",
          "bottom",
          "top-left",
          "top-right",
          "bottom-left",
          "bottom-right"
        ].includes(val);
      }
    }
  },
  data: () => {
    return {
      bottom: 50,
      sideOne: 50,
      sideTwo: 50,
      borderWidth: "",
      isPositive: false
    };
  },
  watch: {
    direction: {
      handler: function(val) {
        this.isPositive = ["top", "right", "left", "bottom"].includes(val)
        this.getBorder();
      },
      immediate: true
    },
    type: {
      handler: function() {
        this.getBorder();
      }
    }
  },
  methods: {
    getBorder() {
      let direction = this.direction;
      let type = this.type;
      switch(type) {
        case "equilateral":
          this.calcEquBorder(direction);
          break;
        case "isosceles":
          this.calcIsoBorder(direction);
          break;
        case "scalene":
          this.calcScaBorder(direction);
          break;
        default:
          break;
      }

      this.$emit("getBorderWidth", this.borderWidth);
    },
    calcEquBorder(direction) {
      let bottom = this.bottom;
      let height = (bottom / Math.sqrt(3)).toFixed(2);

      switch(direction) {
        case "top":
          this.borderWidth = `0 ${height}px ${bottom}px`;
          break;
        case "right":
          this.borderWidth = `${height}px 0 ${height}px ${bottom}px`;
          break;
        case "bottom":
          this.borderWidth = `${bottom}px ${height}px 0`;
          break;
        case "left":
          this.borderWidth = `${height}px ${bottom}px ${height}px 0`;
          break;
        default:
          break;
      }
    },
  }
};

效果图：

6. 生成代码

终于到了最后一步了，生成代码有很多方式，可以将之前从子组件传递出来的数据处理下输出。这里选择一种较为取巧的形式，因为这边使用的是行内 style 样式，所以可以直接在它的 DOM 上获取。

export default {
  methods: {
    postCode() {
      this.$nextTick(() => {
        let dom = this.$refs.triangleRendering;
        let code = dom.attributes.style.textContent;
        
        this.$emit("getCode", code);
      })
    }
  }
}

export default {
  name: "triangle-code",
  props: {
    code: {
      type: String,
      required: true
    }
  },
  watch: {
    code: {
      handler: function(code) {
        this.handleCode(code);
      },
      immediate: true
    }
  },
  data: () => {
    return {
      copyCode: ""
    }
  },
  methods: {
    handleCode(code) {
      code = code.replace(/;/g,";
");
      this.copyCode = `width: 0;
 height: 0;
 border: solid transparent;
 ${code}`;
    }
  }
}

效果图：

最后

期间步骤只是思路过程，详情请查看项目源码，调试过程中不可避免会进行一些修改。

面试前还是要为面试刷下题目的，不然真的容易懵……

云服务器 GPU云服务器 css技巧 Transparent 禁用Transparent border

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114453.html

CSS 搞事技巧：hover+active

摘要：核心概念保存状态。在上一篇搞事技巧中利用来加深了解了的弹性容器属性，这一节是要利用来了解的弹性项目属性。最后很多属性我们可能难以理解其效果，个人认为运用来解释不失为一种良好的方式。介绍在 JavaScript 中，我们可以利用变量，DOM 来保存状态，而 CSS 当中，我们也可以利用伪类选择器来保存状态，这就是 CSS 搞事的核心了。核心概念：保存状态。在上一篇 CSS 搞事技...

cangck_X 2019-08-30 15:43 评论0 收藏0
CSS 搞事技巧：checkbox+label+selector

摘要：列出这个两个属性的常用值看可知已经增加了更多的值代码解读该项目是通过来渲染的，所以会使用到的语法，不过此处仅使用的循环来解决重复书写的问题该效果参考来源。接着使用布局来将它们分割，因为这次主要将的不是，所以就不进行阐述了。介绍其实这篇文章写到一大半时它的名字还叫做《重温 Flex 布局》，结果写着写着就走了心，附上一图表示心情吧： showImg(https://segmentf...

alphahans 2019-08-30 15:43 评论0 收藏0
重温 Flex 布局

摘要：而通过实现则简单多了源码原因解释中间一栏为核心，所以需要优先渲染，结构也就放在了前面，主要是使用属性将放置到前方。源码的列数每列的个数函数原因解释实现瀑布流还是比较简单的。介绍这是关于 Flex 布局的实践，原想还水一点字数来介绍 Flex 相关属性，想想还是算了，阮一峰大佬的两篇文章推上： Flex 布局教程：语法篇 Flex 布局教程：实例篇如何用 CSS 来增进对 Fl...

binta 2019-08-30 15:43 评论0 收藏0