方法说明：两个正方形，一个小的，一个大的，将大的正方向进行旋转，然后移动到小的正方形的合适位置，覆盖小正方形的一部分，使小正方形剩余部分为三角形，再把大正方形的背景色改为浏览器窗口的颜色。

用到知识：

css3 变形-旋转    transform:rotate(Xdeg);

css  定位      position:relative;

html

<body>

　　<div class="top"></div>

　　<div class="mainbody"></div>

</body>

css

<style type="text/css">

        * {

            padding: 0px;

            margin: 0px;

        }

        .mainbody {

            background: blue;

            height: 250px;

            width: 250px;

            -webkit-transform: rotate(45deg);

            -moz-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

            -o-transform: rotate(45deg);

            transform: rotate(45deg);

            position: relative;

            top: -80px;

            left: -50px;

            background-color: white;

        }

        .top {

            height: 100px;

            width: 100px;

            background: red;

        }

    </style>

显示结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAANQAAAB1CAIAAAC5/FgEAAABSklEQVR4nO3SMREAMAwDsVApf1CFksL4odIZgIefnSl3zt67fEl5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR0Z5ZJRHRnlklEdGeWSUR2aUR2XqA/xLfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEdGfGTER0Z8ZMRHRnxkxEfmAQdPPVVWZhThAAAAAElFTkSuQmCC" alt="" />

CSS实现三角形方法一--rotate+relative的更多相关文章

  1. CSS实现三角形方法二--border+content

    方法说明: 1.将一个div块的内容设置为空(content=" "), 2.设置它的边框(上下左右)颜色为透明(transparent), 3.设置它的左侧边框颜色为pink. ...

  2. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  3. 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧

    在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...

  4. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  5. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  6. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

  7. css图形——三角形

    1.css图形简介 在浏览网页的时候,我们经常看见各种图形的效果,而但凡涉及到图形效果,我们第一个想到的就是用图片来实现.但是在前端开发中,为了网站的性能速度,我们都是秉承着少用图片的原生质. 因为图 ...

  8. CSS实现三角形、梯形、平行四边形、圆形、椭圆形、对话框、自适应正方形

    本文篇幅较长,希望能坚持看完,转载请注明出处,如果觉得好文请给个赞吧 CSS实现梯形 CSS实现三角形和梯形主要是依靠border是梯形的特性来做的,有点像相框的那种感觉. 首先我们先给一个正方形设置 ...

  9. CSS 魔法系列：纯 CSS 绘制三角形（各种角度）

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

随机推荐

  1. js里写网页结构， 传函数参数

    如题 "<td align='center' height='30px' width='80px'><a href='javascript:sort(\"&quo ...

  2. codeforces DIV2 D 最短路

    http://codeforces.com/contest/716/problem/D 题目大意:给你一些边,有权值,权值为0的表示目前该边不存在,但是可以把0修改成另外一个权值.现在,我们重新建路, ...

  3. hadoop native

    http://blog.csdn.net/benben85/article/details/4161134 http://stackoverflow.com/questions/19943766/ha ...

  4. 获取sql执行时间

    sql server中获取要执行的sql或sql块的执行时间,方法之一如下: declare @begin datetime,@end datetime set @begin =getdate() - ...

  5. 【转】configure/make/make install的使用说明

    这些都是典型的使用GNU的AUTOCONF和AUTOMAKE产生的程序的安装步骤. ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不是需要CC或GCC ...

  6. ios中点语法、property跟synthesize用法

    一:OC中得点语法 1> 点语法的基本使用: ·使用 对象.成员变量   可以实现设置成员变量值,和获取成员变量的值   2> 点语法的本质 (点语法是Xcode编译器自己帮我们完成的一个 ...

  7. Power oj2470/DFS

    题目链接 2469: C 小Y的难题(1) Time Limit: 1000 MS Memory Limit: 65536 KB Total Submit: 9 Accepted: 7 Page Vi ...

  8. Photos FrameWork 续

    1. Model PHAsset .PHAssetCollection.PHCollectionList 是Photos框架中的模型类,PHAsset类模型是图片或者视频文件数据:PHAssetCol ...

  9. Callable、Future和FutureTask区别

    在前面的文章中我们讲述了创建线程的2种方式,一种是直接继承Thread,另外一种就是实现Runnable接口. 这2种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果. 如果需要获取执行结果,就 ...

  10. Android 学习 之 无需类名启动其他程序

    在网上搜索了一会相关的实现代码,发现所有的文章都说是需要包名和类名.但是人家的程序,我们怎么可能知道哪个是第一个启动的Activity?所以,真正用在项目上,那种方法基本上没什么用的.于是查看官方文档 ...