【手写各种三角形】课程表结构列表所用

Wyliss

于 2021-03-22 14:39:32 发布

阅读量315

点赞数

分类专栏： vue 文章标签： html

本文链接：https://blog.csdn.net/YhWyl527/article/details/115078072

版权

vue 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

课程表左上角
在这里插入图片描述

html部分
<div class="box">
            <div class="triangle">考核项目</div>
            <div class="triangle2"></div>
            <div class="triangle1">被考核人员</div>
        </div>
css部分
.box {
    width: 120px;
    height: 90px;
    /* display: flex; */
    position: relative;
    border: 1px solid #000;
}
.triangle {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: right;
}
.triangle1 {
    width: 100%;
    height: 45px;
    line-height: 45px;
    text-align: left;
}
.triangle2 {
    height: 1px;
    width: 150px;
    background: black;
    position: absolute;
    top: 50%;
    left: -15px;
    transform: rotate(36deg);
}

1.左上角直角
在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

2.右上角直角
在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-left: 100px solid red;
    border-right: 100px solid transparent;
}

3.左下角直角
在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

4.右下角直角
在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

5.上小左右等边

在这里插入图片描述

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

在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

在这里插入图片描述

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}