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. java集群优化——多线程下的单例模式
			
    在最初学习设计模式时,我为绝佳的设计思想激动不已,在以后的project中.多次融合设计模式,而在当下的设计中.我们已经觉察出了当初设计模式的高瞻远瞩.可是也有一些不足,须要我们去改进.有人说过.世界 ...
    
			
    2. 
						
  2. 屏蔽微软的SignalR
			
    去年采用ASP.NET MVC开发项目,在谷歌浏览器里调试页面的时候,发现项目在不停地请求数据,链接很奇怪: http://localhost:63004/654c2dd725bb4401b8fc0c ...
    
			
    3. 
						
  3. 2016/3/20  数组定义  数组遍历   超全局数组   数组元素设置（in_array() 、array_reverse()、count()、array_unique()、unset()、array_values、array_merge、array_push） 列表实例
			
    一.数组定义 php数组与其他语言的数组的不同: 其他例如java语言 :同一种类型数据的集合. php:数组可以存储任何类型的数据.同一个数组中可以放int类型也可以放string类型 ①索引数组的 ...
    
			
    4. 
						
  4. 显示 目录 大小  du
			
    [root@hadoop1 /]# du -BG  -d 11G ./boot0G ./dev63G ./homedu: 无法访问"./proc/6689/task/6689/fd/4&qu ...
    
			
    5. 
						
  5. ubuntu下nginx的安裝
			
    本系列的lnmp的大框架基本上是按照http://www.linuxzen.com/lnmphuan-jing-da-jian-wan-quan-shou-ce-si-lnmpda-jian-yuan ...
    
			
    6. 
						
  6. JavaScript 图片广告自动与手动的切换
			
    ​1.代码 <html> <head>   <script type="text/javascript" src="jquery-1.8.j ...
    
			
    7. 
						
  7. 转【前端基础进阶之Promise】
			
    前言 Promise的重要性我认为我没有必要多讲,概括起来说就是必须得掌握,而且还要掌握透彻.这篇文章的开头,主要跟大家分析一下,为什么会有Promise出现. 在实际的使用当中,有非常多的应用场景我 ...
    
			
    8. 
						
  8. JVM从理论到实践
			
    这里实践不是指动手写JVM,而是动手做实验,结合日常工作相关的部分,理论与实践结合从而对这块知识有更深入的认识. 随着Java10的到来,JVM这块也有不少调整改进,网上大部分内容都是过时或大部分开发 ...
    
			
    9. 
						
  9. 【转】jenkins上配置robotframeworkride自动化脚本任务
			
    jenkins上配置robotframeworkride自动化脚本任务 编写好的自动化脚本,集成在jenkins上进行自动运行于监控,这里采用分布式构建,在一台slave上进行任务构建与自动化脚本的运 ...
    
			
    10. 
						
  10. css content
			
    before after demo 1 添加描述信息 div1:after{conent:"天假额外的文字"} 2 也可以显示元素的某些属性 <a class="d ...
    
			
    11.