在前端的笔试、面试过程中,经常会出现一些不规则图形的CSS设置,基本上多是矩形外加一个三角形。利用CSS属性可以实现三角形的生成,主要利用上下左右的边距的折叠。 

 

1、第一种图形:

 .box {
width: 200px;
height: 200px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #f00;
border-left: 50px solid #ff0;
border-bottom: 50px solid #0f0;
border-right: 50px solid #00f;
}

2、第二种图形:

 .box1 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #f00;
border-left: 50px solid #ff0;
border-bottom: 50px solid #0f0;
border-right: 50px solid #00f;
}

3、右上、右下、左上、左下三角形:

     /*右上三角*/
.box2 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #f00;
border-left: 50px solid #fff;
}
/*右下三角*/
.box3 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-left: 50px solid #fff;
border-bottom: 50px solid #f00;
}
/*左上三角*/
.box4 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #f00;
border-right: 50px solid #fff;
}

4、上下左右三角形:

     /*上三角。下边距不设置影响位置*/
.box6 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #f00;
border-left: 50px solid #fff;
/*border-bottom: 50px solid #f00;*/
border-right: 50px solid #fff;
}
/*下三角。上边距不设置影响位置*/
.box7 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
/*border-top: 50px solid #fff;*/
border-left: 50px solid #fff;
border-bottom: 50px solid #f00;
border-right: 50px solid #fff;
}
/*左三角*/
.box8 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #fff;
border-left: 50px solid #f00;
border-bottom: 50px solid #fff;
/*border-right: 50px solid #fff;*/
}
/*右三角*/
.box9 {
width: 0px;
height: 0px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
border-top: 50px solid #fff;
/*border-left: 50px solid #f00;*/
border-bottom: 50px solid #fff;
border-right: 50px solid #f00;
}

CSS学习笔记:利用border绘制三角形的更多相关文章

  1. css 利用border 绘制三角形. triangle

    1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. CSS用border绘制三角形

    使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...

  3. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. HTML+CSS学习笔记(4) - 认识标签(3)

    HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...

  6. HTML+CSS学习笔记(3)- 认识标签(2)

    HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...

  7. css学习笔记四

    广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...

  8. CSS学习笔记:溢出文本省略(text-overflow)

    原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...

  9. CSS学习笔记10 相对定位,绝对定位与固定定位

    文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...

随机推荐

  1. 分布式管理系统-git安装及配置

    安装完成后,在开始菜单里找到“Git”->“Git Bash”,蹦出一个类似命令行窗口的东西,就说明Git安装成功! 安装完成后,还需要最后一步设置,在命令行输入: $ git config - ...

  2. ASP.NET&#160;操作Cookie详解&#160;增加,修改,删除

    ASP.NET 操作Cookie详解 增加,修改,删除 Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密).定义于RFC2109.它 ...

  3. 关于DDD的 认识

    tks: 第一篇: 领域驱动设计系列(1)通过现实例子显示领域驱动设计的威力 第二篇: 领域驱动设计系列(2)浅析VO.DTO.DO.PO的概念.区别和用处 第三篇: 领域驱动设计系列(3)有选择性的 ...

  4. 三款精美的html5及css3的源码插件

    1.HTML5 3D爱心动画 晚来的七夕礼物 七夕情人节刚过,今天小编却在国外的网站上看到一个利用HTML5和CSS3制作的3D爱心动画,莫非老外也过七夕?当然小编还是将这款HTML5 3D爱心动画收 ...

  5. HDU 4587 TWO NODES 割点

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4587 题意: 删除两个点,使连通块的数目最大化 题解: 枚举删除第一个点,然后对删除了第一个点的图跑 ...

  6. html = data.decode(&#39;gbk&#39;).encode(&#39;utf-8&#39;)

    html = data.decode('gbk').encode('utf-8')此处encode编码要与html文件内charset=utf-8的格式一致,如果不一致,浏览器打开乱码,文本编辑器正常 ...

  7. 执行grunt命令报错 Cannot find module &#39;coffee-script&#39;

    Failed to list grunt tasks in yudian-frontend-salesplatform\Gruntfile.js: process finished with exit ...

  8. ajax入门基础

    一.简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种用于创建快速动态网页的技术. AJAX通过在后台与 ...

  9. elasticsearch入门笔记

    安装 注意:elasticsearch需要非ROOT用户启动 https://es.xiaoleilu.com/010_Intro/10_Installing_ES.html 下载elasticsea ...

  10. 潭州课堂25班:Ph201805201 django 项目 第三十六课 后台文章管理(课堂笔记)

    get 请求, 1,获取文章标签 , 2,拿到前台传来的值, 3,根据前台传来的值在数据库中查询 4.,返回数据到前台,渲染, 分页算法 : 在 utils 下创建  paginator_script ...