Css 梯形图形并添加文字

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>

页面效果：

时间： 2024-10-12 19:16:51

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

在图片上绘制图形和添加文字

使用opencv读取图片,在图片上绘制线条.矩形.圆.多边形和添加文字 1.画线 #!/usr/bin/python3 # -*- coding:utf-8 -*- import cv2 import numpy as np # 读取一张图片 img = cv2.imread('img.jpg',cv2.IMREAD_COLOR) #画线 , 目标,起始坐标,终点坐标,颜色,线宽 cv2.line(img,(10,10),(200,100),(255,255,255),5) #画矩形 , 目标,

html+css 在图片上添加文字

html <view class="container"> <image class="" src="{{book.image}}"></image> <view class="description"> <text class="title">{{book.title}}</text> <text class="aut

css实现的在图片上面添加文字说明

css实现的在图片上面添加文字说明:在一些图片效果中,图片上面会有文字说明,下面就通过代码实例介绍一下如何实现此效果.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落

强大的CSS：图形绘制合集，方便你我！

以下这些造型简单的图形都是纯CSS外加一个HTML标签实现的,不少实现以前我介绍过,或者你也知道,但是有些相信你没见过. 1. 正方形实时渲染效果如下: 相关CSS代码: #square { width: 100px; height: 100px; background: red; } 2. 长方形效果: 相关CSS代码: #rectangle { width: 200px; height: 100px; background: red; } 这里推荐一下我的前端学习交流扣qun:73177

CSS：图形绘制合集，方便你我！

CSS各种图形绘制

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>绘图</title> <style type="text/css"> div{ background:black; } /*绘正方形*/ .square{ width:100px; height:100px; } /*绘长方形*/ .retangle{ width:

利用css布局在图片插入文字

在图片里添加文字) 1.[background]引用背景图片, 两种引用: css:{background:URL(img.jpg)} html: <a src="img.jpg"></a> 2.建立需要尺寸的div块, 在新建一个div块,,利用原始的覆盖现有的. 3.块需被包含在图片[div]块里,再包含文字[div]块. 4.注需要控制方向[ float]. <!doctype html> <html> <head> &

图片上添加文字--<div>

1.常用的方式是:将一张图片设置为背景,然后在里面加文字,你加入的图片代码是: <img src="img.jpg" width='100px" height="50px"> 改为 <div style="background:url('img.jpg') no-repeat;width:100px;height:50px">添加文字</div> ===========================

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

对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同一行显示且对齐呢? 对于这种现象,方法有3种: 1.通过添加css的“vertical-align:middle;”: 2.如果图片是背景图片,可以在css中设置背景图片,然后设置文字的padding属性: 3.把文字和图片分别放入不同的div中. 经过多次的测试,上面三种方法都可以让图片和文字在同

Css 梯形图形 并添加文字

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

Css 梯形图形并添加文字

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