lksafjof

今天不是愚人节

于 2019-05-06 11:45:05 发布

阅读量139

点赞数

本文链接：https://blog.csdn.net/qq_32446225/article/details/89878598

版权

这是一个小技巧

div.radius$*2

<div class="radius1"></div>
<div class="radius2"></div>
<div class="radius3"></div>

图片

在这里插入图片描述

代码

.radius1{
            width: 40px;
            height: 40px;
            border: 70px solid pink;

            border-top-left-radius: 56px;
            border-top-right-radius: 0px;
            border-bottom-right-radius: 32px;
            border-bottom-left-radius: 0px;
        }

图片

在这里插入图片描述

代码

.radius2{
            border-width: 90px;
            border-style: solid;
            border-color: pink skyblue firebrick transparent;

        }

transform

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Css3Transform</title>
    <style>
        .demo{
            margin: 20px;
            padding: 0;
            width: 150px;
            height: 50px;
            background: pink;
            font-weight: bold;
            font-size: large;
            float: left;
        }
        .trans1{
            transform-origin: left 0 0;/* 设置中；中心点*/
            transform:rotate(30deg);
        }
        .trans2{
            transform: skewy(30deg);
        }
        .trans3{
            transform: scale(0.8);
        }
        .trans4{

            transform:translate(5px,50px);
        }

    </style>
</head>
<body>
    <div class="demo">no transform</div>
    <div class="demo trans1">rotate（30deg）</div>    <!--旋转-->
    <div class="demo trans2">skew（30deg）</div>      <!--斜切-->
    <div class="demo trans3">scale（0.8）</div>       <!--缩放-->
    <div class="demo trans4">translate（5px,50px）</div>  <!--move position-->
</body>
</html>