css利用border制作各种形状的原理如图：

使用border绘制三角形是什么原理？事实上，宽度相等的border是以45度对接的，如下图:

没有了上border如图所示：

再设置border的宽度为0：

设置border的高度为0：如图

最后设置左右border的颜色为透明，如下图：

贴代码，做个小三角形

<style>

    .border{

        width:;

        height:;

        border-bottom:100px solid red;

        border-left:50px solid  transparent;

        border-right:50px solid transparent;

    }

</style>

<body>

     <div class="border"></div>

</body>

看了这个大神的作品，感觉学到了好多。这个是展示的css的另一个属性，clip-path.

https://segmentfault.com/a/1190000010936207

附上其中2个比较有用的链接

1.css利用边框做各种样子

https://css-tricks.com/examples/ShapesOfCSS/

2.利用clip-path做各种形状，类似svg

http://bennettfeely.com/clippy/

												


											
css中border制作各种形状的更多相关文章
	

    
								
  1. css中border画三角形
		
    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...
    
		
    2. 
						
  2. Div+Css中transparent制作奥运五环
		
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    3. 
						
  3. CSS中border和outline的区别
		
    border: border-width:1px; border-style:solid; border-color:#ccc; 可以简写为:border:1ox solid #ccc; outlin ...
    
		
    4. 
						
  4. css中clip-path属性的运用
		
    今天看到一位同学的需求,要在一个div中加一个小尖尖,对话时发的图片,旁边这个三角是怎么实现与图片的颜色一致,效果如下: 当然,解决这个问题有各种奇淫巧技,现在我们来看一个css属性clip-path ...
    
		
    5. 
						
  5. 原来css中的border还可以这样玩
		
    原来css中的border还可以这样玩 前面的话: 在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可 ...
    
		
    6. 
						
  6. css中的border还可以这样玩
		
    在看这篇文章之前你可能会觉得border只是简单的绘制边框,看了这篇文章,我相信你也会跟我一样说一句"我靠,原来css中的border还可以这样玩".这篇文章主要是很早以前看了别人 ...
    
		
    7. 
						
  7. css中元素border属性的构成以及配合属性值transparent可得到一些特殊形状1.0
		
    css中我们经常使用到元素的border属性和属性值transparent,可能好多人还不太了解border的构成以及配合transparent的一些效果: 1.border的构成如下所示:   ht ...
    
		
    8. 
						
  8. 利用CSS中的:after、: before制作的边三角提示框
		
    小颖昨天分享了一篇参考bootstrap中的popover.js的css画消息弹框今天给大家再分享一篇使用:before和:after伪元素画消息弹框的CSS. 画出来是介个酱紫的: 有没有觉得画的萌 ...
    
		
    9. 
						
  9. CSS中cursor属性给标签加上小手形状
		
    HTML/CSS 2012-08-10 CSS,标签 我们发现a标签在网页中有一个值得注意的地方,即鼠标移到a标签上光标会变成一只小手的图标,移出a标签后又恢复为默认箭头. 如今,JS在网页中的功能越 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 浅谈asp.net通过本机cookie仿百度（google）实现搜索input框自己主动弹出搜索提示
			
    对于通过用户输入关键词实现自己主动弹出相关搜索结果,这里本人给两种解决方式,用于两种不同的情形. 常见方法是在数据库里建一个用户搜索关系表,然后通过用户搜索框输入的keyword异步调用数据表中的相关 ...
    
			
    2. 
						
  2. Sql sever 分组排序
			
    维护人事的时候人事局要求加入一个新功能,详细需求例如以下:加入的人员在同一个单位的依照顺序编号而且单位也要实现时间排序,也就是说有两个排序,第一单位名称排序.先创建的一直在前.然后依照创建时间依次排序 ...
    
			
    3. 
						
  3. 李洪强iOS开发之函数式 编程初窥
			
    函数式 编程初窥   最近在学习Erlang和Python.Erlang是完全的函数式编程语言,Python语言是面向对象的语言,但是它的语法引入了大量的函数式编程思想.越研究越觉得函数式的编程思路可 ...
    
			
    4. 
						
  4. 多媒体开发之---h.264 rtsp网络流测试流
			
    rtsp://218.204.223.237:554/live/1/66251FC11353191F/e7ooqwcfbqjoo80j.sdp 珠海拱北
    
			
    5. 
						
  5. 返回零长度的数组或者集合，而不是null
			
    <<Effective Java>> 第四十三条:返回零长度的数组或者集合,而不是null 假设一个方法的返回值类型是集合或者数组 .假设在方法内部须要返回的集合或者数组是零长 ...
    
			
    6. 
						
  6. 2016/04/26  流程   数据库lcdb 四个表  1，用户表users     2，流程表（设定有哪些流程）liucheng   3，流程发起者表（记录谁发起到哪里）  4，流程经过的人员表 flowpath （order排序）
			
    流程:      十一 个页面 1,denglu.php(登录) <!DOCTYPE html> <html lang="en"> <head> ...
    
			
    7. 
						
  7. scala wordcount   kmeans
			
    scala wordcount   kmeans k-means算法的输入对象是d维向量空间的一些点,对一个d维向量的点集进行聚类. k-means聚类算法会将集合D划分成k个聚簇.
    
			
    8. 
						
  8. HDU2255 奔小康赚大钱 —— 二分图最大权匹配 KM算法
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2255 奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others)    ...
    
			
    9. 
						
  9. JavaScript 实现的 SHA1 散列
			
    1.代码:/****  Secure Hash Algorithm (SHA1)*  http://www.webtoolkit.info/***/  function SHA1 (msg) {    ...
    
			
    10. 
						
  10. 使用expdp的心得
			
    第一步:首先使用DBA权限的用户创建directory,我使用system ,可以在服务器本地创建,也可以远程连接sqlplus进行创建,使用的将是服务器上面的路径.要确保创建directory时,操 ...
    
			
    11.