css画图形

博客：  史上最强大的40多个纯cs图形

问题：看了上面的博客思考简单的三角行是怎么形成的？

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

最后一直想不通，一直认为边距是矩形的，却没有想到原本的边距也是有宽度的，所以原本的边距并不是一个矩形，而是一个梯形。

类似这样的（如果中间width、height设置为0的话，就会变成对角线了,再设置相应的边颜色就可以看见三角形了）；csdn有相关的详细博客：css三角形的原理

---

在史上最强大的40多个纯cs图形看到了最喜欢的像素图形；

#space-invader{
  box-shadow:
    0 0 0 1em red,
    0 1em 0 1em red,
    -2.5em 1.5em 0 .5em red,
    2.5em 1.5em 0 .5em red,
    -3em -3em 0 0 red,
    3em -3em 0 0 red,
    -2em -2em 0 0 red,
    2em -2em 0 0 red,
    -3em -1em 0 0 red,
    -2em -1em 0 0 red,
    2em -1em 0 0 red,
    3em -1em 0 0 red,
    -4em 0 0 0 red,
    -3em 0 0 0 red,
    3em 0 0 0 red,
    4em 0 0 0 red,
    -5em 1em 0 0 red,
    -4em 1em 0 0 red,
    4em 1em 0 0 red,
    5em 1em 0 0 red,
    -5em 2em 0 0 red,
    5em 2em 0 0 red,
    -5em 3em 0 0 red,
    -3em 3em 0 0 red,
    3em 3em 0 0 red,
    5em 3em 0 0 red,
    -2em 4em 0 0 red,
    -1em 4em 0 0 red,
    1em 4em 0 0 red,
    2em 4em 0 0 red;

    background: red;
    width: 1em;
    height: 1em;
    overflow: hidden;

    margin: 50px 0 70px 65px;
  }

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANkAAACLCAIAAABjmqvdAAADqElEQVR4nO2YQa5bMQwDc/+D9hrtposChgH2W5JJZwY8gJ5nssnnN4AHn9sHAPyFFsEFWgQXaBFcoEVwgRbBhZ+0+Au+lfL+/uWHLZbfAf7QIrhAi+ACLYILtAgufH2Ln4+69zD7dlr08jGK2bfTopePUcy+nRa9fIxi9u206OVjFLNvp0UvH6OYfTstevkYxezbadHLxyhm306LXj5GMft2WvTyMYrZt9Oil49RzL6dFr18jGL27bTo5WMUs2+nRS8fo5h9+9e3qGNmLv7OBVqUSXGccucCLcqkOE65c4EWZVIcp9y5QIsyKY5T7lygRZkUxyl3LtCiTIrjlDsXaFEmxXHKnQu0KJPiOOXOBVqUSXGccucCLcqkOE65c4EWZVIcp9y5QIsyKY5T7lygRZkUxyl3Lnx9i7q5b94ItHhbc8RGoMXbmiM2Ai3e1hyxEWjxtuaIjUCLtzVHbARavK05YiPQ4m3NERuBFm9rjtgItHhbc8RGoMXbmiM2Ai3e1hyxEWjxtuaIjUCLtzVHbIRHW7zrI6Ubs2ppMcRxyp0H0GKI45Q7D6DFEMcpdx5AiyGOU+48gBZDHKfceQAthjhOufMAWgxxnHLnAbQY4jjlzgNoMcRxyp0H0GKI45Q7D6DFEMcpdx5AiyGOU+48gBZDHKfceUBUi3cds9rp3ougRbaZ7r0IWmSb6d6LoEW2me69CFpkm+nei6BFtpnuvQhaZJvp3ougRbaZ7r0IWmSb6d6LoEW2me69CFpkm+nei6BFtpnuvQhaZJvp3ougRbaZ7r2ISy3+x4G3lUSs4z1170XQ4hPreE/dexG0+MQ63lP3XgQtPrGO99S9F0GLT6zjPXXvRdDiE+t4T917EbT4xDreU/deBC0+sY731L0XQYtPrOM9de9F0OIT63hP3XsRtPjEOt5T914ELT6xjvfUvRdBi0+s4z1170XQ4hPreE/dexEPtfgeZu9Ji7To8p60SIsu70mLtOjynrRIiy7vSYu06PKetEiLLu9Ji7To8p60SIsu70mLtOjynrRIiy7vSYu06PKetEiLLu9Ji7To8p5RLd5Ff+W7jmN/XbQoQ4vN0KIMLTZDizK02AwtytBiM7QoQ4vN0KIMLTZDizK02AwtytBiM7QoQ4vN0KIMLTZDizK02AwtytBiM7QoQ4vN0CK4QIvgAi2CC7QILtAiuECL4IJpi/CdlPf3L3Z/YsHXQovgAi2CC7QILtAiuECL4AItggt/AInzU1cCDK0aAAAAAElFTkSuQmCC" alt="" />有趣的css像素艺术