CSS笔记：利用border绘制三角形|前端开发|码途山海.智隐长卷 -

程序人生|重庆纽新

找回密码
立即注册

QQ登录

只需一步，快速开始

欢迎访问【程序人生-重庆纽新】，本网站为软件开发人员视觉的IT资讯、软件开发中各种问题的解决办法！！
搜索
码途山海.智隐长卷»技术记录 › 程序员 › 前端开发 › CSS笔记：利用border绘制三角形
发新帖

lzg

2308

积分

0

好友

259

主题

CSS笔记：利用border绘制三角形

楼主
发表于 2015-4-15 13:27:59 | 查看: 918| 回复: 0
在前端的笔试、面试过程中，经常会出现一些不规则图形的CSS设置，基本上多是矩形外加一个三角形。利用CSS属性可以实现三角形的生成，主要利用上下左右的边距的折叠。　

1、第一种图形：

  1. .box {
  2. width: 200px;
  3. height: 200px;
  4. -webkit-box-sizing:border-box;
  5. box-sizing:border-box;
  6. border-top: 50px solid #f00;
  7. border-left: 50px solid #ff0;
  8. border-bottom: 50px solid #0f0;
  9. border-right: 50px solid #00f;
  10. }
复制代码



2、第二种图形：
  1. .box1 {
  2.         width: 0px;
  3.         height: 0px;
  4.         -webkit-box-sizing:border-box;
  5.         box-sizing:border-box;
  6.         border-top: 50px solid #f00;
  7.         border-left: 50px solid #ff0;
  8.         border-bottom: 50px solid #0f0;
  9.         border-right: 50px solid #00f;
  10.      }
复制代码



3、右上、右下、左上、左下三角形：
  1. /*右上三角*/
  2.     .box2 {
  3.         width: 0px;
  4.         height: 0px;
  5.         -webkit-box-sizing:border-box;
  6.         box-sizing:border-box;
  7.         border-top: 50px solid #f00;
  8.         border-left: 50px solid #fff;
  9.      }
  10.      /*右下三角*/
  11.     .box3 {
  12.         width: 0px;
  13.         height: 0px;
  14.         -webkit-box-sizing:border-box;
  15.         box-sizing:border-box;
  16.         border-left: 50px solid #fff;
  17.          border-bottom: 50px solid #f00;
  18.      }
  19.      /*左上三角*/
  20.     .box4 {
  21.         width: 0px;
  22.         height: 0px;
  23.         -webkit-box-sizing:border-box;
  24.         box-sizing:border-box;
  25.         border-top: 50px solid #f00;
  26.         border-right: 50px solid #fff;
  27.      }
复制代码



4、上下左右三角形：

  1.     /*上三角。下边距不设置影响位置*/
  2.     .box6 {
  3.         width: 0px;
  4.         height: 0px;
  5.         -webkit-box-sizing:border-box;
  6.         box-sizing:border-box;
  7.         border-top: 50px solid #f00;
  8.         border-left: 50px solid #fff;
  9.          /*border-bottom: 50px solid #f00;*
  10.         border-right: 50px solid #fff;
  11.      }
  12.      /*下三角。上边距不设置影响位置*/
  13.      .box7 {
  14.         width: 0px;
  15.         height: 0px;
  16.         -webkit-box-sizing:border-box;
  17.         box-sizing:border-box;
  18.          /*border-top: 50px solid #fff;*/
  19.         border-left: 50px solid #fff;
  20.         border-bottom: 50px solid #f00;
  21.         border-right: 50px solid #fff;
  22.      }
  23.      /*左三角*
  24.      .box8 {
  25.         width: 0px;
  26.         height: 0px;
  27.         -webkit-box-sizing:border-box;
  28.         box-sizing:border-box;
  29.         border-top: 50px solid #fff;
  30.         border-left: 50px solid #f00;
  31.         border-bottom: 50px solid #fff;
  32.          /*border-right: 50px solid #fff;*/
  33.      }
  34.      /*右三角*/
  35.      .box9 {
  36.         width: 0px;
  37.         height: 0px;
  38.         -webkit-box-sizing:border-box;
  39.         box-sizing:border-box;
  40.         border-top: 50px solid #fff;
  41.          /*border-left: 50px solid #f00;*/
  42.         border-bottom: 50px solid #fff;
  43.         border-right: 50px solid #f00;
  44.      }
复制代码





border, 三角形, 左右

收藏回复 只看该作者 道具 举报

返回列表
高级模式
B Color Image Link Quote Code Smilies



QQ|小黑屋| 码途山海.智隐长卷 渝ICP备15002301号-2   渝公网安备50011202504426

GMT+8, 2025-5-18 02:11 , Processed in 0.045099 second(s), 30 queries .

©Copyright 程序人生!

©2012-2015重庆纽新

快速回复 返回顶部 返回列表