zoukankan      html  css  js  c++  java

  • CSS实现三角形方法一--rotate+relative

    方法说明：两个正方形，一个小的，一个大的，将大的正方向进行旋转，然后移动到小的正方形的合适位置，覆盖小正方形的一部分，使小正方形剩余部分为三角形，再把大正方形的背景色改为浏览器窗口的颜色。

    用到知识：

    css3 变形-旋转    transform:rotate(Xdeg);

    css  定位      position:relative;

    html

    <body>
　　<div class="top"></div>
　　<div class="mainbody"></div>
</body>

    css

    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        .mainbody {

            background: blue;
            height: 250px;
            width: 250px;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            position: relative;
            top: -80px;
            left: -50px;
            background-color: white;
        }

        .top {
            height: 100px;
            width: 100px;
            background: red;
        }
    </style>

    显示结果：
  • 相关阅读:
    MYSQL之基本操作
    Python操作Mysql之基本操作
    编辑器
    iOS项目评估报告
    mac安装as配置
    屏幕适配
    CocoaPods配置步骤
    android网络监测
    获取通讯录
    json解析
  • 原文地址：https://www.cnblogs.com/shenfangfang/p/4904400.html
Copyright © 2011-2022 走看看