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. java 建造者模式

    package de.bvb.test3; /** * 建造者模式: 假如一个类有4个字段,每个字段或者每几个字段的组合都需要设置为构造函数,构造函数就比较麻烦 * 而且如果再加一个字段进去也不好拓展 ...

  2. httpd 安装

    官网地址:http://httpd.apache.org/docs/2.4/ Download Download the latest release from http://httpd.apache ...

  3. HTML如何让文本两端对齐

    <p style="text-align:justify; text-justify:inter-ideograph;>日本驻华大使丹羽宇一郎:日中关系比夫妻还紧密日本驻华大使丹 ...

  4. php大小写转换

    1.将字符串转换成小写   strtolower();: 该函数将传入的字符串参数所有的字符都转换成小写,并以小定形式放回这个字符串.例: <?php $str = "I want T ...

  5. Java8闭包

    闭包在很多语言中都存在,例如C++,C#.闭包允许我们创建函数指针,并把它们作为参数传递,Java编程语言提供了接口的概念,接口中可以定义抽象方法,接口定义了API,并希望用户或者供应商来实现这些方法 ...

  6. java mkdir()和mkdirs()的区别

    boolean mkdir()    创建此抽象路径名指定的目录.   boolean mkdirs()    创建此抽象路径名指定的目录,包括创建必需但不存在的父目录. 也就是说,mkdir只能创建 ...

  7. java主函数的含义

    下面对java中的主函数进行简单的解释,解决可能困惑大家的问题,下面举的例子在实际开发中几乎不会出现,但是为了解决好奇心,大家可以这么去尝试一下! 我们在java中看到的主函数通常是这样的:publi ...

  8. webstorm vue高亮

    文件->设置->文件类型 第一步 第二步选择html 添加*.vue 搞定

  9. [转载]LazyWriter（惰性写入器） 进程的作用

      Q:What Does the LazyWriter Process Do? The LazyWriter process is a periodic process that checks th ...

  10. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...