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. udhcp源码详解（五） 之DHCP包--options字段
			
    中间有很长一段时间没有更新udhcp源码详解的博客,主要是源码里的函数太多,不知道要不要一个一个讲下去,要知道讲DHCP的实现理论的话一篇博文也就可以大致的讲完,但实现的源码却要关心很多的问题,比如说 ...
    
			
    2. 
						
  2. Linux中的mysql.redis
			
    1,Linux上的mysql MariaDB数据库管理系统是MySQL的一个分支,主要由开源社区在维护,采用GPL授权许可. 开发这个分支的原因之一是:甲骨文公司收购了MySQL后,有将MySQL闭源 ...
    
			
    3. 
						
  3. 关于maven pom
			
    1 maven pom.xml只是配置文件 构建的流程已经固化在maven中了,pom.xml只是对这个流程的配置.特别是插件,在不进行人工绑定的情况下,插件是对应固定的生命周期的,我们操作的时候是操 ...
    
			
    4. 
						
  4. Test redis
			
    单机测试: public class RedisClient{ private Jedis jedis; private JedisPool jedisPool; private ShardedJed ...
    
			
    5. 
						
  5. ubuntu LNMP环境下安装Redis，以及php的redis扩展
			
    1.下载 sudo wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压 sudo tar zvxf redis-4.0.9.t ...
    
			
    6. 
						
  6. html5--html实现乘法口诀表
			
    html5--html实现乘法口诀表 总结: 1.多种情况问题:分情况讨论就出来了 2.汉字和数字的对应关系 3.相同的部分统一处理,不同的部分分别对待(这里用中间变量) 问题:九九乘法口诀 两点提示 ...
    
			
    7. 
						
  7. gfnormal 域名 是阿里云的高防IP
			
    最近DGA检出了一堆阿里高防的域名,例如:u3mbyv2siyaw2tnm.gfnormal09aq.com,然后专门查找了下相关文档. 例如 8264.com 这个网站启用了aliyun的高防DDo ...
    
			
    8. 
						
  8. Linux 打包classes
			
    进入项目后 tar -zcvf ~/${HOSTNAME}-${PWD##*/}-$(date +%Y-%m-%d)-classes.tar.gz webapps/ROOT/WEB-INF/class ...
    
			
    9. 
						
  9. linux下修改apache，nginx服务端口号
			
    一.linux下修改apache端口号 yum安装后,apache配置文件: /etc/httpd/conf/httpd.conf 找到apache目录下的 httpd.conf, 使用vi 打开,找 ...
    
			
    10. 
						
  10. 1.ARC下是否有内存溢出等问题  2.@property参数  3.#import和@class的区别
			
    1.ARC下是否有内存溢出等问题? 答案:必须要担心啊,ARC也不是万能的.答案:必须要担心啊,ARC也不是万能的.这里主要是涉及到集合类的数据类型   比如数组,我们定义了一个可变数组muarr1, ...
    
			
    11.