css-折角效果

最新推荐文章于 2023-02-07 16:55:16 发布

吃饭了吗

最新推荐文章于 2023-02-07 16:55:16 发布

阅读量406

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_41824429/article/details/127226814

版权

正折角和斜折角效果

在这里插入图片描述

<style>

    /* 折角 */
    .box {
        width: 60px;
        height: 40px;
        background: #58a;
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4)0) no-repeat 100% 0 / .5em .5em,
            linear-gradient(-135deg, transparent .32em, #58a 0);
    }

    /* 斜折角 */
    .box1 {
        margin-top: 10px;
        width: 60px;
        height: 40px;
        background: #58a;
        background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .4)0) no-repeat 100% 0 / .64em .3695em,
            linear-gradient(-150deg, transparent .32em, #58a 0);
        /* 30-60-90的直角三角形， 斜边为底的高为 0.32，根据勾股和余弦得出另外三边 0.64, 0.3695  0.739 , x为 0.64, y为 0.3695 */
    }
</style>


<main>
    <div class="box"> </div>
    <div class="box1"></div>
</main>