Css 梯形图形 并添加文字

时间：2021-12-15 23:24:22
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: #;

        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(, , , 0.81);

            height: ;

            width: 175px;

            transform: rotateZ(50deg);

        transform: rotateZ(50deg);

        -ms-transform: rotateZ(50deg);/* IE 9 */

        -webkit-transform: rotateZ(50deg);/* Safari and Chrome */

    }

</style>

页面效果：

Css 梯形图形 并添加文字

Css 梯形图形 并添加文字

Css 梯形图形 并添加文字的更多相关文章

  1. html&plus;css 在图片上添加文字

    html <view class="container"> <image class="" src="{{book.image}}& ...

  2. 一种基于重载的高效c&num;上图片添加文字图形图片的方法

    在做图片监控显示的时候,需要在图片上添加文字,如果用graphics类绘制图片上的字体,实现图像上添加自定义标记,这种方法经验证是可行的,并且在visual c#2005 编程技巧大全上有提到,但是, ...

  3. linux 添加文字、图形、线条、箭头的 截图

    1.deepin-screenshot 截图 软件包里搜索deepin-screenshot 支持添加文字.图形.线条.箭头的功能 2.字体发虚 Linux mint 开始菜单等字体不清晰 在软件管理 ...

  4. three&period;js添加文字

    添加文字需要用到fontLoader,测试貌似只能异步.在success中回调. 对于中文字体,需要将ttf格式转换为json格式或者是js格式之后才能使用,不过一般转换之后的文件比较大.建议使用Fo ...

  5. C&num;使用 DirectX SDK 9做视频播放器 并在视频画线添加文字 VMR9

    视频图像处理系列 索引 VS2013下测试通过. 在百度中搜索关键字“DirectX SDk”,或者进入微软官网https://www.microsoft.com/en-us/download/det ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. OSG项目经验2&lt&semi;在场景中添加文字面版&gt&semi;

    添加文字版需要用到osg的三个名字空间:                         osgText::Text,这个类用来添加文字和设置文字的一些属性:                     ...

  8. css之line-height及图片文字垂直居中

    css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...

  9. 从零开始学习html（六）开始学习CSS，为网页添加样式

    一.认识CSS样式 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

随机推荐

  1. 借助 SIMD 数据布局模板和数据预处理提高 SIMD 在动画中的使用效率

    原文链接 简介 为发挥 SIMD1 的最大作用,除了对其进行矢量化处理2外,我们还需作出其他努力.可以尝试为循环添加 #pragma omp simd3,查看编译器是否成功进行矢量化,如果性能有所提升 ...

  2. good books

  3. hibernate初步4

    JPA 1.JPA概述 JPA(Java Persistence API)是Sun官方提出的Java持久化规范.它为Java开发人员提供了一种对象/关系映射工具来管理Java应用中的关系数据.,而Hi ...

  4. JDBCTemplate基础学习

    JDBCTemplate:spring提供的用于操作数据库的模板,类似DbUtils.使用时必须设置数据源(DataSource):数据源如DBCP.C3P0等 一.JDBCAPI简单使用Demo 1 ...

  5. hdu 2844 poj 1742 Coins

    hdu 2844 poj 1742 Coins 题目相同,但是时限不同,原本上面的多重背包我初始化为0,f[0] = 1;用位或进行优化,f[i]=1表示可以兑成i,0表示不能. 在poj上运行时间正 ...

  6. axure制作项目符号列表样式

    1. 拖动文本面板到页面编辑区域 2. 点击工具栏的[项目符合列表] 来自:非原型不设计

  7. Linux操作系统-安装JAVA

    首先准备好jdk文件(例如:本地已下载了jdk-6u33-linux-x64.bin),将它上传到路径 “/home/username/” 这个目录的下面 其次按步骤执行: 1.进入到 “/home/ ...

  8. 实验吧——隐写术之复杂的QR&lowbar;code

    好久没有更新隐写术方面的题目了,对不起各位小可爱,今天我会多多更新几篇文章,来慰藉你们! 永远爱你们的 ---------新宝宝 1:复杂的QR_code 解题思路:保存图片之后使用在线解码工具,并没 ...

  9. 【H5 音乐播放实例】第一节 音乐详情页制作（1）

    本教程是一个H5音乐播放的详情页制作,实现了H5音乐播放,音轨的跳动,已经较为酷炫的UI界面. 通过本教程,您会学到: 1.H5音乐播放 (带音轨) 2.iconfont字体图标库 3.div+css ...

  10. 【代码笔记】Web-JavaScript-JavaScript语法

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

相关文章