用CSS画三角形技巧(面试题)

其生

关注

阅读 53

2022-02-25

场景:在网页中展示出小三角形时,除了可以使用图片外,还可以使用代码完成。
实现原理:

  • 利用盒子边框完成

实现步骤:

  1. 设置一个盒子
  2. 设置四周不同颜色的边框
  3. 将盒子宽高设置为0,仅保留边框
  4. 得到四个三角形,选择其中一个后,其他三角形(边框)设置颜色为透明
    请添加图片描述
    通过调整不同边框的宽度,可以调整三角形的形态

请添加图片描述

精彩评论(0)

0 0 举报