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. qt qml fuzzyPanel 毛玻璃效果

    毛玻璃效果,用qml来写代码真是简短,大爱qml:) [下载地址]http://download.csdn.net/detail/surfsky/8426641 [核心代码] Rectangle{ c ...

  2. view向上滚动

    之前本来是打算做TextView垂直向上滚动的,后来发现一位大神做得很好,https://github.com/sfsheng0322/MarqueeView 孙福生大神,然后自己要用到多个View向 ...

  3. C++ 构造函数、析构函数、拷贝构造、赋值运算符

    之所以要把它们放在一起,是因为在使用C/C++类语言的时候,很容易混淆这几个概念(对Java来说完全没有这样的问题,表示Javaor完全没有压力). 先建立一个测试类(包含.h和.cpp) //~ P ...

  4. cocos2d-x视频控件VideoPlayer的用户操作栏进度条去除(转载)

    目前遇到两个问题: (1)视频控件移除有问题,会报异常. (2)视频控件有用户操作栏,用户点击屏幕会停止视频播放. 对于第一个问题,主要是移除控件时冲突引起的,目前简单处理是做一个延时处理,先stop ...

  5. 我的nodejs学习之路1

    距离上次写文章类东西已经有4-5年了,猛然写东西有种提笔忘字的感觉. 言归正传,这是一篇记录我自己学习nodejs的文章,在写下这篇文章的时候我也不是什么大牛,也不是很了解nodejs这项技术.之所以 ...

  6. js计算两个日期的差值

    // 获取两个比较值的毫秒数var postman_confirmtime_ms = Date.parse(new Date(data.postman_confirmtime.replace(/-/g ...

  7. DbnBase64加密处理

    package com.dbn.utils; import java.io.UnsupportedEncodingException; import java.net.URLDecoder; impo ...

  8. 高通平台FastMMI（FFBM模式）简介与进入方法

    参考: http://blog.csdn.net/tfslovexizi/article/details/51499979 http://www.voidcn.com/blog/jimbo_lee/a ...

  9. OpenLayers添加点【php请求MySQL数据库返回GeoJSON数据】

    php请求MySQL数据库返回GeoJSON数据的实现方法请参见: http://www.cnblogs.com/marost/p/6234514.html OpenLayers[v3.19.1-di ...

  10. LINQ之路 7：子查询、创建策略和数据转换

    在前面的系列中,我们已经讨论了LINQ简单查询的大部分特性,了解了LINQ的支持计术和语法形式.至此,我们应该可以创建出大部分相对简单的LINQ查询.在本篇中,除了对前面的知识做个简单的总结,还会介绍 ...