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. Android：内存控制及OOM处理
			
      1. OOM(内存溢出)和Memory Leak(内存泄露)有什么关系? OOM可能是因为Memory Leak,也可能是你的应用本身就比较耗内存(比如图片浏览型的).所以,出现OOM不一定是Me ...
    
			
    2. 
						
  2. 使用spring框架时，使用xml还是注解
			
    1 xml的优缺点 1.1 优点 解耦合,方便维护.xml不入侵代码,方便代码阅读. 1.2 缺点 开发速度慢. 2 注解的优缺点 2.1 优点 能够加快开发速度,因为它将常用的主体逻辑隐藏在注解中了 ...
    
			
    3. 
						
  3. Infrastructure for container projects.
			
    Linux Containers https://linuxcontainers.org/
    
			
    4. 
						
  4. leetcode 659. Split Array into Consecutive Subsequences
			
    You are given an integer array sorted in ascending order (may contain duplicates), you need to split ...
    
			
    5. 
						
  5. POJ3164 Command Network —— 最小树形图
			
    题目链接:https://vjudge.net/problem/POJ-3164 Command Network Time Limit: 1000MS   Memory Limit: 131072K  ...
    
			
    6. 
						
  6. YTU 2912: 圆柱体的C++
			
    2912: 圆柱体的C++ 时间限制: 1 Sec  内存限制: 128 MB 提交: 333  解决: 133 题目描述 小明的弟弟加入的C++兴趣小组,组长布置的第一个任务就是将已有的C程序改写成 ...
    
			
    7. 
						
  7. gearcache在qemu-kvm虚拟化平台下的实现
			
    需要用到的数据结构: 链表,基树. gearcache在qemu-kvm虚拟化平台下的实现主要有以下的步骤: 1.打开镜像文件的时候,为gearcache中的基数池(page_node_pool)和读 ...
    
			
    8. 
						
  8. 【HNOI2004】 打鼹鼠
			
    [题目链接] 点击打开链接 [算法] 动态规划 f[i]表示上一次打了第i只鼹鼠,所能打死的最多的鼹鼠数量 [代码] #include<bits/stdc++.h> using names ...
    
			
    9. 
						
  9. Python进程间通信Queue
			
    1.Queue使用方法: Queue.qsize():返回当前队列包含的消息数量: Queue.empty():如果队列为空,返回True,反之False : Queue.full():如果队列满了, ...
    
			
    10. 
						
  10. UVa 1213 Sum of Different Primes (DP)
			
    题意:给定两个数 n 和 k,问你用 k 个不同的质数组成 n,有多少方法. 析:dp[i][j] 表示 n 由 j 个不同的质数组成,然后先打表素数,然后就easy了. 代码如下: #pragma  ...
    
			
    11.