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. mac_snailSVN

    作者:潘捷链接:https://www.zhihu.com/question/19705164/answer/119484169来源:知乎著作权归作者所有,转载请联系作者获得授权. Mac下之前也有类 ...

  2. QT常见数据类型操作

    平常使用QStringList,都是通过at()访问其中的元素,然后试图也通过它修改元素,编译器报错,原来要使用下标访问修改: //accessRecList.at(3)=strSimilarity; ...

  3. .md文件的语法

    md全称是Macdown,.md文件可以当记事本一样使用,作为编辑软件,还可以自己添加样式,图片,链接等,可以用记事本打开,也可以保持样式排版转换为html文件,语法比较简单..md除了编辑容易的优势 ...

  4. 【转】Source Insight的Alt + W键不能使用的解决办法

    转载地址:http://velep.com/archives/607.html 对于Source Insight 3.5,习惯于使用Alt + W组合键并配合数字键来切换文件窗口,带来无比的便利.但是 ...

  5. FruitFrolic

    这是一个连连看小游戏,以 Unity2D 开发.因用了数种水果图片来做头像,所以游戏取名 FruitFrolic.同样,它也只是我闲时的练手. 少时曾玩过掌上游戏机里的俄罗斯方块及打飞机,及手机上的推 ...

  6. winform 对话框，保存，另存为，还有打印控件

    学习的对话框的种类: 1.打开文件对话框(OpenFileDialog) 2.保存文件对话框(SaveFileDialog) 3.字体对话框(FontDialog) 4.颜色对话框(ColorDial ...

  7. JS汉语转拼音脚本

    测试代码: var anhui = "安徽"; //获得全拼 pinyin.getFullChars(anhui); //获得首拼 pinyin.getCamelChars(anh ...

  8. CentOs6.5下安装svn

    1.检查是否已安装 rpm -qa subversion 1.1如果需要卸载旧版本(如果想在一台机器安装不同svn,切记不要执行此步骤!!!) yum remove subversion 2.安装 y ...

  9. Linux内核创建一个新进程

    张雨梅   原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-10000 创建新进程 如果同一个程序被多 ...

  10. PHP基础知识之————PHP Web脚本中使用FFmpeg

    简介 本文将尝试指出在PHP Web脚本中使用FFmpeg时需要了解的所有重要事项.它还将显示一些使用示例,以使事情更清楚.这个想法也可以应用到其他web脚本语言. 从PHP脚本调用命令行工具 选择一 ...