• Css 梯形图形 并添加文字


    HTML页面的代码:
     <body>
      
        <div style="500px;border:solid 1px #ccc;">
            <div>
                <div></div>
                <div class="trapezoid"></div>
                <div id="tranFont">即将推出</div>
                <h1>题目</h1>
                <p>
                    内容:CSS3 允许您使用 3D 转换来对元素进行格式化。
                    在本章中,您将学到其中的一些 3D 转换方法:
                    rotateX()
                    rotateY()
                    点击下面的元素,来查看 2D 转换与 3D 转换之间的不同之处:
                </p>
            </div>
        </div>
    
     </body>

    css样式代码:

    <style type="text/css">
          #tranFont{
            position: absolute;
            top: 100px;
            right: 63px;
            transform: rotateZ(50deg);
            -ms-transform: rotateZ(50deg);
            -webkit-transform: rotateZ(50deg);
            color: #000;
            font-size: 14px;
            
        }
      .trapezoid{
               position: absolute;
                top: 80px;
                right: -20px;
                border-left: 25px solid transparent;   //控制梯形腰的斜度,像素越大,底角越小,如125px
                border-right: 25px solid transparent;
                border-bottom: 50px solid rgba(245, 76, 76, 0.81);
                height: 0;
                 175px;
                transform: rotateZ(50deg);
            transform: rotateZ(50deg);
            -ms-transform: rotateZ(50deg);/* IE 9 */
            -webkit-transform: rotateZ(50deg);/* Safari and Chrome */  
        }
    </style>

    页面效果:

  • 相关阅读:
    Centos7创建用户su登录后显示为 bash-4.1$
    winserver 搭建 Citrix License 许可服务器
    Centos7扩展存储空间
    CentOS7配置crate集群
    CentOS7安装cratedb
    初探Vue
    浅谈web攻防
    响应式布局
    JavaScript正则表达式,你真的知道?
    15个关于Chrome的开发必备小技巧[译]
  • 原文地址:https://www.cnblogs.com/renxiaoren/p/5435978.html
Copyright © 2020-2023  润新知