css绘制基本案例

Posted 2022-10-12 zhuxiang1633

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>

知识点

1. border

• border-color: #c2c2c2 transparent transparent transparent;

transparent：透明

1. transition:all 0.2s

动画效果，all指的是所有属性，如width、transform等

1. transform-origin: 30px 15px;

修改坐标原点位置

1. transform:rotateZ(180deg);

沿着Z轴旋转180°