CSS学习笔记:利用border绘制三角形
在前端的笔试、面试过程中,经常会出现一些不规则图形的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绘制三角形的更多相关文章
- css 利用border 绘制三角形. triangle
1.基础三角形. <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- CSS用border绘制三角形
使用border绘制三角形的思路,就是border尺寸设置一个较大的值,元素自身的宽高设置为0,全部由边线占据,这样每边就会显示为四分之一块的三角形.这样不借助图片,可以直接绘制出三角形了. 一个栗子 ...
- CSS学习笔记之选择器
目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
- CSS学习笔记10 相对定位,绝对定位与固定定位
文档流中的元素的位置由元素在 (X)HTML 中的位置决定,这就是最原始的普通流,前面讲到的浮动CSS学习笔记08 浮动可以改变元素在文档流中的位置,除了这个我们还可以通过使用CSS的position ...
随机推荐
- ServletContext加入和访问
(1)关于ServletContext认识: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveGxnZW4xNTczODc=/font/5a6L5L2T/f ...
- 2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件、设备
2014年TI杯大学生电子设计竞赛地区赛使用仪器及器件.设备 a) 3A/30V双路稳压电源(可并联): b) 60MHz示波器: c) 三位半数字万用 ...
- MYSQL C API 记录
一.环境与条件 MySQL AB 提供了C API,能够提供低等级界面,负责完毕涉及SQLserver交互的大多数常规任务:数据库连接 .查询.结果集处理和错误处置.C API通过两个组件实现: 头文 ...
- 通过java.util.concurrent写多线程程序
在JDK 1.5之前,要实现多线程的功能,得用到Thread这个类,通过这个类设计多线程程序,需要考虑性能,死锁,资源等很多因素,一句话,就是相当麻烦,而且很容易出问题.所幸的是,在JDK1.5之后, ...
- 原子操作(atomic operation)
深入分析Volatile的实现原理 引言 在多线程并发编程中synchronized和Volatile都扮演着重要的角色,Volatile是轻量级的synchronized,它在多处理器开发中保证了共 ...
- POJ 1252 Euro Efficiency
背包 要么 BFS 意大利是说给你几个基本的货币,组成 1~100 所有货币,使用基本上的货币量以最小的. 出口 用法概率.和最大使用量. 能够BFS 有可能 . 只是记得数组开大点. 可能会出现 1 ...
- android(9)_数据存储和访问3_scard基本介绍
使用Activity的openFileOutput()保存文件的方法,文件存储在手机空间,通常情况下,手机的存储空间不是很大,存储小文件确定.假设你要存储大文件,如视频,是不可行. 对于这样大的文件, ...
- 有愿意共同发展USB固件做?
有愿意共同发展USB固件做.现在,它使用STC89S52+PDIUSBD12(环教你玩USB开发板)它实现了一个USB键盘,项目地址:https://github.com/artprogramming ...
- Razor和HtmlHelper的使用意义
Razor和HtmlHelper的使用意义 写这篇文档的目的是为了给初学MVC的同伴们介绍在MVC的View中的两个新概念,能有利于我们更快,更好的开发项目.一个是视图引擎,一个是HtmlHlper. ...
- hdu Oulipo(kmp)
Problem Description The French author Georges Perec (1936–1982) once wrote a book, La disparition, w ...