Css 梯形图形并添加文字

时间：2016-04-26 19:07:57 收藏：0 阅读：713

HTML页面的代码：
 <body>
  
    <div style="width: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;
            width: 175px;
            transform: rotateZ(50deg);
        transform: rotateZ(50deg);
        -ms-transform: rotateZ(50deg);/* IE 9 */
        -webkit-transform: rotateZ(50deg);/* Safari and Chrome */  
    }
</style>

页面效果：

技术分享

原文：http://www.cnblogs.com/renxiaoren/p/5435978.html

Css 梯形图形 并添加文字

Css 梯形图形并添加文字