用css画三角形-border

# border详解(用css画三角形)

今天面试官要我用css画一个直角三角形,要求斜边为10px,我人傻了.记录一下

参考:https://www.cnblogs.com/wangjiachen666/p/9462837.html

1.一般的边框

div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
        }

可是border究竟长什么样呢?

2.四边不同色

div{
            width: 100px;
            height: 100px;
            border-top: 10px solid red;
            border-right: 10px solid deepskyblue;
            border-bottom: 10px solid black;
            border-left: 10px solid yellow;
        }

看到这里,很多人就懂了,自然想要删除长边边

3. width,height设为0,隐藏其他三边(这里为了看清楚,将边框的宽度设为100 px)

div{
            width: 0px;
            height: 0px;
            border-top: 100px solid red;
            border-right: 100px solid transparent;
            border-bottom: 100px solid transparent;
            border-left: 100px solid transparent;
        }

这里的transparent是border-color的属性,表示隐藏.

另外三边不能直接不写哦,不写会直接没有的,原因看下图:

如果想要上面的红色块,下面的黑色块可以没有,但是下面的黑色块没有,会使左右的块少了下面一半身体,可以理解为高度没有了,下图的模糊状是没有的啊,是我为了加强理解加上的啊.(这里的一半身子没有了不是width少一半啊,千万不要搞错了,左边的绿块的width始终是100 px)

回到面试的正题,画一个直角三角形,斜边为10 px.

那么两条直角边为6 px和8 px就最好了,那么我们可以令上面的长度为6 px,左边的为8 px,效果如下:(为了好看全部*10,然后下面是100 px长的对照组,然后直角三角形旋转一下,方便比对)

*{
            margin-left: 10px;
            padding: 0;
        }
        div#d1{
            margin-top: 100px;/* 相当于向下平移,不然转出去了 */
            width: 0px;
            height: 0px;
            border-top: 60px solid red;
            border-left: 80px solid transparent;
            transform-origin:0 0;/* 定义旋转点为左上角,默认是正中心 */
            transform: rotate(-36.87deg);
        }
        div#d2{
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: red;
        }

完美~

最后附上找到了一个非常好的rotate的博客:https://www.cnblogs.com/yanggeng/p/11275771.html