css 小样式写法

1. 三角形（可用于提示框）

初始情况

html:

<div class="triangle"></div>

css：

.triangle {
  box-sizing: border-box;
   100px;
  height: 100px;
  border: 10px solid;
  border-color: #333 red yellow #888
}

此时，box-sizing: border-box 规定了 width height 包含 内容 + 内边距 + 边框宽度，我设置的100px 的宽高，减去10的边 内容还剩 80*80，如果 宽高为0 border 为10px 那么 就是一个20*20 的方点。然后利用 color 的 transparent 属性  将目标方向的其它隐藏，就会得到想要的结果：

目标效果：

css:

<style>
    .triangle {
        box-sizing: border-box;
         0;
        height: 0;
        border: 4px solid;
        border-color: #333 transparent transparent transparent;    // 上 右 下 左
    }
</style>

效果：