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. [更新Github地址]python学习，自己写了个简单聊天工具mychat
			
    最近在学习python,自己写了个最最简单的聊天工具mychatv0.1. 第一版,完成基本的聊天功能. GUI用的是自带的TKinter,用到的模块主要就是socket(网络编程), thread( ...
    
			
    2. 
						
  2. 调参侠的末日？ Auto-Keras 自动搜索深度学习模型的网络架构和超参数
			
    Auto-Keras 是一个开源的自动机器学习库.Auto-Keras 的终极目标是允许所有领域的只需要很少的数据科学或者机器学习背景的专家都可以很容易的使用深度学习.Auto-Keras 提供了一系 ...
    
			
    3. 
						
  3. C中使用memset
			
    int i; cout<<memset(&i,1,sizeof(int))<<endl; 输出结果是16843009,而不是填充的1111 1111,为什么呢? 因为m ...
    
			
    4. 
						
  4. YTU 2553: 谁是赢家
			
    2553: 谁是赢家 时间限制: 1 Sec  内存限制: 128 MB 提交: 94  解决: 25 题目描述 某一天,hcbbt等一群弱菜去tamara巨巨家里一起玩了一个卡牌游戏.巨 巨家里有2 ...
    
			
    5. 
						
  5. c语言和oc对比
			
    1)源文件对比 思考&实现1: 1)在C语言中,我们遇到不同后缀的文件有哪些? .c .o .out .h 2.基本语法对比 1)数据类型对比学习 2)变量的定义对比 3)流程控制语句对比 1 ...
    
			
    6. 
						
  6. python库学习笔记——爬虫常用的BeautifulSoup的介绍
			
    1. 开启Beautiful Soup 之旅 在这里先分享官方文档链接,不过内容是有些多,也不够条理,在此本文章做一下整理方便大家参考. 官方文档 2. 创建 Beautiful Soup 对象 首先 ...
    
			
    7. 
						
  7. 并不对劲的图论专题（三）：SPFA算法的优化
			
    1.bzoj1489-> 这是个新套路. 我们希望找到最小的x,那么可以二分x,然后判断是否存在圈的边权的平均值小于等于x. 设圈的边权依次为w1,w2,w3,…,wk,平均值为p, 则有p=  ...
    
			
    8. 
						
  8. Windows下手动安装redis服务
			
    1.Redis本身不支持windows,但是有另外的团队在维护着一个windows下的版本   2.下载地址: https://github.com/MSOpenTech/redis 2.8的版本在源 ...
    
			
    9. 
						
  9. （转）Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound
			
    http://blog.xmaoseo.com/glyphicons-halflings-regular-woff-font-404-notfound/ 今天查看网站的源代码,发现有个glyphico ...
    
			
    10. 
						
  10. 强类型的HTML模板方法与直接显示模型
			
    模型: public class Article { [Display(Name="文章")] public string ArticleID { get; set; } [Dis ...
    
			
    11.