css- 纯css画正圆、胶囊按钮、三角形

1. 正圆
   a、盒子必须是正方形
   b、设置边框圆角为盒子宽高的一半->border-radius: 50%

   代码示例：
   
   html：
   	<div class="circle"/>
   	
   css：
   	.circle{
   		 width: 200px;
   		 height: 200px;
   		 border: 1px solid red;
   		 border-radius: 50%;
   	}
   

2. 胶囊按钮
   a、盒子要求是长方形
   b、设置->border-radius: 盒子高度的一半

   代码示例：
   
   html：
   	<div class="circle-half"/>
   	
   css：
   	.circle-half{
   		 width: 200px;
   		 height: 100px;
   		 border: 1px solid red;
   		 border-radius: 50px;
   	}
   

3. 三角形
   a、场景：在网页中展示出小三角形时，除了可以使用图片外，还可以使用代码完成
   b、实现原理：利用盒子边框完成
   c、实现步骤：

   1）设置一个盒子
   2）设置四周不同颜色的边框
   3）将盒子宽高设置为0，仅保留边框
   4）得到四个三角形，选择其中一个后，其他三角形（边框）设置颜色为透明
   

   d、拓展：通过调整不同边框的宽高，可以调整三角形的形态

代码示例：

	html：
		<div class="triangle"/>
		
	css：
		.triangle{
			  width: 0;
			  height: 0;
			  border-top: 100px solid red;
			  border-right: 100px solid transparent;
			  border-bottom: 50px solid yellow;
			  border-left: 100px solid transparent;
		}