css draw the base case

drawing a triangle css

<style>    
    .triangle-box{
        margin: 50px auto;
        height: 300px;
        width: 500px;
        box-shadow: 1px 1px 10px rgba(0,0,0,0.3);
        position: relative;
    }
    .triangle{
        position: absolute;
        top: 10px;
        left: 20px;
        border-width: 30px;
        border-color: #c2c2c2 transparent transparent transparent;
        border-style: solid;
        transition: all 0.5s;
        -webkit-transition: all 0.2s;
        /*设置旋转重心*/
        transform-origin: 30px 15px;
    }
    .triangle:hover{
        transform: rotateZ(180deg);
    }
</style>
<div class="triangle-box">
    <span class="triangle"></span>
</div>

Knowledge Point

1. border

• border-color: #c2c2c2 transparent transparent transparent;

transparent: transparent

1. transition:all 0.2s

Animation, All refers to all attributes, such as width, transform, etc.

1. transform-origin: 30px 15px;

Modify the origin of the position

1. transform:rotateZ(180deg);

180 ° rotation along the Z axis