1.实现梯形

利用边框我们可以得到梯形，首先我们给一个div添加边框，当给边框设置四个不同的颜色时，我们可以得到这样的样式，可以看到这里上边框是一个梯形，那么如果我们给其他边框设置颜色为透明(transparent)，就可以得到一个梯形了。梯形的高便是边框的宽度设置。

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div>
 </div>
</body>
</html>

div{
 width:100px;
 height:100px;
 margin:80px auto;
 /*border-top:50px solid pink;
 border-left:50px solid grey;
 border-right:50px solid #FFE767;*/
 /*border-top:50px solid transparent;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-bottom:50px solid #57BA63;*/
 border-top:50px solid pink;
 border-left:50px solid blue;
 border-right:50px solid purple;
 border-bottom:50px solid gray;
 
}

2.实现三角形

借助于border实现梯形的思想，如果div内容区域为0，梯形就可以变成三角形了，即只要将div的width和height都设置为0 ，border根据需要设置透明度即可。

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div>
 </div>
</body>
</html>

div{
 width:0px;
 height:0px;
 margin:80px auto;
 /*border-top:50px solid pink;
 border-left:50px solid grey;
 border-right:50px solid #FFE767;*/
 border-top:50px solid transparent;
 border-left:50px solid transparent;
 border-right:50px solid transparent;
 border-bottom:50px solid #57BA63;
}

3.直角三角形

法一：去掉左边框影响上边框三角形构成的左边界
div{
width:0px;
height:0px;
margin: 80px auto;
border-top: 100px solid pink;
border-left: 0px solid transparent; //重点在这里，不设置左边框
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}

法二：上边框构成的三角形和左边框构成的三角形组合成一个直角三角形

div{
width:0px;
height:0px;
margin: 80px auto;
border-top: 100px solid pink;
border-left: 100px solid pink;//把透明变粉色
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
}

小小border用处多的更多相关文章

  1. border用处多

    1. 使用border属性实现梯形    给定一个div,通过设定div四个边框不同的颜色且设置比较粗的边框线条,可以看到div除了中间的content部分,四个边框均成梯形状,既然已经有了梯形的雏形 ...

  2. CSS ------ 样式学习 （一）

    CSS 指层叠样式表 (Cascading Style Sheets) :定义如何显示 HTML 元素(一套自定义的衣服) 语法: 由选择器和声明(可以是一条或多条)构成, 声明以大括号({})括起来 ...

  3. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  4. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  5. Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处。用来指定播放器 1 2. <object> 标签用于包含对象，比如图像、音

    Atitit.web 视频播放器classid clsid 大总结quicktime,vlc 1. Classid的用处.用来指定播放器 1 2. <object> 标签用于包含对象,比如 ...

  6. display: -webkit-box; 做个小小试验

    最近做个微信项目发现css3在微信内部浏览器中和其他浏览有些区别 做个小小笔记 .job { display: -webkit-box; display: flexbox; -webkit-box-p ...

  7. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  8. css样式之border

    border用法详解: 1.border-width 属性设置边框的宽度 可能的值:像素 2.border-style 属性设置边框的样式 可能的值:solid(直线),dashed(虚线),dott ...

  9. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

随机推荐

  1. Windows7下的免费虚拟机（微软官方虚拟机）

    前言: 不是说windows7自带的虚拟机最好用,而是他是正式版的,免费的,只要你是windows7用户,就可以免费使用: 其实我最推荐的还是Vmware: 微软为什么提供免费的虚拟机呢? 因为vis ...

  2. 仿网易新闻 ViewPager 实现图片自动轮播

    新闻 App 首页最上方一般会循环播放热点图片,如下图所示. 本文主要介绍了利用 ViewPager 实现轮播图片,图片下方加上小圆点指示器标记当前位置,并利用 Timer+Handler 实现了自动 ...

  3. MySQL主从同步配置(Ubuntu)

    一.在两台Linux机器上安装MySQL 二.Master主服务器配置(192.168.1.3) 1.编辑my.cnf(命令查找文件位置:find / -name my.cnf) vi /etc/my ...

  4. Dynamics AX 2012 R2 业务系列-销售业务流程

    在博文Dynamics AX R2 业务系列中,Reinhard对这个系列做了一个规划,下面我们就按照规划开始说业务吧. 1.销售的主要职责 其实这里说的职责主要是针对销售文员,并非整天外面满世界跑业 ...

  5. Paxos算法与Zookeeper分析

    1 Paxos算法 1.1 基本定义 算法中的参与者主要分为三个角色,同时每个参与者又可兼领多个角色: ⑴proposer 提出提案,提案信息包括提案编号和提议的value; ⑵acceptor 收到 ...

  6. EditText光标位置

    1.xml中设置 gravity="top"  加入edittext框的高度不止一行时,该属性可是光标定位在第一行,不设置的话光标是默认在框的中间 2.etEdit.setSele ...

  7. JAVA异常处理机制的简单原理和应用

  8. 复旦大学2015--2016学年第一学期高等代数I期末考试情况分析

    一.期末考试成绩班级前几名 胡晓波(93).宋沛颖(92).张舒帆(91).姚人天(90).曾奕博(90).杨彦婷(90).白睿(88).唐指朝(87).谢灵尧(87).蔡雪(87) 二.总成绩计算方 ...

  9. 设置bundle包中的默认语言

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo; color: #d28f5a } span.s1 { } span.s2 { c ...

  10. mysql replace

    replace(object, search,replace) 示例:update table set col1 = replace(col1, 'a', 'A'); 将col1字段中的小写a替换成大 ...