第八十四节，css布局小技巧

/*最外层div*/
.a{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    position: relative;
}
/*插入图片的div*/
.b{
    width: 384px;
    height: 240px;
    background-color: #ff4e37;
    overflow: hidden;
}
/*遮罩层div*/
.c{
    width: 384px;
    height: 240px;
    background-color: #010008;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
/*鼠标放上去效果*/
div .c:hover{
    background-color: #010008;
    opacity: 0.5;
    color: #FFFFFF;
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    line-height: 240px;
}


<div class="a">
    <div class="b">
        <img src="53d.jpg">
    </div>
    <div class="c">
        <samp>美女图片</samp>
    </div>
</div>

.a{
    /*设置边框*/
    border-top: 30px solid red;
    border-right: 30px solid black;
    border-bottom: 30px solid green;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

.a{
    /*设置边框*/
    border-top: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 0px solid transparent;
    border-left: 30px solid blue;
    /*将区块转换成内联块*/
    display: inline-block;
}

<div class="a"></div>

.af{
    width: 100px;
    height: 50px;
    background-color: #ff563a;
}
.a{
    /*设置边框*/
    border-top: 10px solid green;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
}
.a:hover{
    /*设置边框*/
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid green;
    border-left: 10px solid transparent;
    /*将区块转换成内联块*/
    display: inline-block;
    margin-top: 10px;
    margin-left: 10px;
}

<div class="af">
    <div class="a"></div>
</div>