水平垂直居中+画一个三角形

关于编码规范很好的网站编码规范
下面列举几个最常见的：

• 不要使用import
• 根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值
• 减少标签的数量
  编写 HTML 代码时，尽量避免多余的父元素。很多时候，这需要迭代和重构来实现
• JavaScript 生成的标签
  通过 JavaScript 生成的标签让内容变得不易查找、编辑，并且降低性能。能避免时尽量避免

垂直居中有几种实现方式，给出代码范例

• 单行文本水平（text-align:center）垂直（行高line-height=div高度）居中 ，要是多行只能用padding了
  示例

• 一个块级元素包裹多个块级元素，块级元素又有文本，只需要让父元素padding上下相等即可，
  示例

• 一个块级元素包裹另一个块级元素，让父元素相对定位，子元素绝对定位，top和left各50%，然后 transform: translate(-50%,-50%)
  示例

• 仍然用absoute，不过是和margin-left搭配
  示例

• 水平居中好说，就两种块级和行内元素

• 垂直居中：行内：（1）最常见的上下padding相等（2）dispaly:table-cell和vertical-align:middle
  块级元素：绝对定位：top:50%,然后margin-top:一半的高度或者transform:translateY(-50%)

• 水平垂直：绝对定位或者flex

实现如下效果，每种效果都只使用一个html 标签来实现

Paste_Image.png

• 分析：其实每个三角形状的东西都是由一个四方形的span经过

1. 绝对定位后左右上下移动
2. 旋转背景色设为空白Border为none等（比如3）
3. border设置某3个透明只剩下一个三角形
   示例