css 实现 各种三角形 实现思路与案例

绘制思路

// 首先我们先绘制一个具有宽高的元素,如下图所示
 .div {
      width: 200px;
	  height: 200px;
      background-color: red;
      /*定义border*/
      border: 50px solid black;
  }
 

/*当我们有了border 外边框, MDN里面是这样定义border的,它是一个用于设置各种单独的边界
属性的 '简写' 属性。也就是说可以单独设置 top, bottom, right, left 的中的各自的
width,style,color, 如下
*/
div {
	width: 200px;
	 height: 200px;
	 background-color: rebeccapurple;
	 border-bottom: 50px solid green;
	 border-top: 50px solid yellow;
	 border-right: 50px solid aqua;
	 border-left: 50px solid chocolate;
}

/*我们可以明显的看出来, 对角线是两个边框线条的分界点. 如果我们把宽高去掉,设置为0
你就可以看出来每个边框侧边设置对应一个三角形. 这时候就可以知道 
把一部分边框侧边颜色设置为透明就能得到 各种三角形了
*/

// 此时我们就能得到 上下左右四个方向的 三角形
div{
   width: 0px;
   height: 0px;
   border-bottom: 50px solid #555555;
   border-top: 50px solid transparent;
   border-right: 50px solid transparent;
   border-left: 50px solid transparent;
 }
div{
	/*等腰三角形*/
	display: inline-block; /*设置元素为行内块元素*/
	border-bottom: 20px solid #555555;  /*为三角形高度*/
	border-right: 40px solid transparent;  /*三角形的底边长度为right2倍*/
	border-left: 10px solid transparent;
}

div {
	 /*直角三角形*/
	 display: inline-block;
	 width: 0px;
	 height: 0px;
	 border-top: 10px solid #555555;  /*直角边长*/
	 border-right: 10px solid transparent; /*直角边长*/
}