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. Unity构造函数注入代码示例
			
    Unity构造函数注入代码示例 如果使用 Unity 实例化一个类,该类的构造函数依赖一个或多个其他类,则 Unity 会为构造函数自动创建参数中指定的被依赖的类的实例.例如,下面的代码展示了一个名为 ...
    
			
    2. 
						
  2. solr入门之多线程操作solr中索引字段的解决
			
    涉及的问题: 建索引时有一个字段是该词语出现的次数,这个字段是放在solr里的  而我用的是多线程来进行全量导入的,这里就涉及到了多线程问题 多个线程操作同一个变量时怎样处理? 我是这样子做的 : 首 ...
    
			
    3. 
						
  3. C#6.0 新功能
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
    
			
    4. 
						
  4. mysql15--垂直分表水平分表
			
    分表技术(表的结构不能变) 分表技术有(水平分割和垂直分割) 当一张越来越大时候,即使添加索引还慢的话,我们可以使用分表 以qq用户表来具体的说明一下分表的操作. 思路如图 : 首先我创建三张表 u ...
    
			
    5. 
						
  5. USACO26 moofest 奶牛集会（归并排序）
			
    听说这题也是bzoj的3378&&poj1990,然而没有权限号交不了..poj懒得登. 题意:有n个奶牛,他们相互发出max(a[i].v,a[j].v)*abs(a[i].p-a[ ...
    
			
    6. 
						
  6. YTU 2928: 取不重复的子串。
			
    2928: 取不重复的子串. 时间限制: 1 Sec  内存限制: 128 MB 提交: 5  解决: 5 题目描述 输入字母构成的字符串(不大于30字符)从中读取3个不重复的字符,求所有取法,取出的 ...
    
			
    7. 
						
  7. ubuntu中desktop与alternate版本的区别（转载）
			
    转自:http://www.hyleong.com/ubuntu-desktop-alternate/ 今天ubuntu发布了11.04版本,但是下载的时候有desktop和alternate版本,他 ...
    
			
    8. 
						
  8. MongoDB安全事件的防范与反思
			
    此文已由作者温正湖授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 近段时间来,全球范围内数以万计的MongoDB实例被攻击,作为旨在为用户提供最优MongoDB云服务的网易蜂 ...
    
			
    9. 
						
  9. bzoj 3930: [CQOI2015]选数【递推】
			
    妙啊 这个题一上来就想的是莫比乌斯反演: \[ f(d)=\sum_{k=1}^{\left \lceil \frac{r}{d} \right \rceil}\mu(k)(\left \lceil  ...
    
			
    10. 
						
  10. python的安装教学
			
    1.首先登陆到python的官方网站 https://www.python.org/ 2.鼠标放在Download上,点击下面对应的型号,我的是Windows 3.点击Windows到此页面,点击3. ...
    
			
    11.