css小样式写法

初始情况

html:

css：

.triangle {
box-sizing: border-box;
width: 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:

效果：