zoukankan      html  css  js  c++  java
  • 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>

    页面效果:

  • 相关阅读:
    python汉诺塔
    圆周率计算
    PIL: 建立一个GIF图
    Jieba库使用和好玩的词云
    Turtle库的建立——汉诺塔
    计算pi的精度+进度条显示
    Python——我所学习的turtle函数库
    Python——教你画朵太阳花
    Python常用模块re的使用
    正则表达式字符组/元字符/量词
  • 原文地址:https://www.cnblogs.com/renxiaoren/p/5435978.html
Copyright © 2011-2022 走看看