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

用到知识：

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. english 释词

    english 释词 [amount of & number of]the amount of /the number of指……的数量an amount of/a number of 指“大 ...

  2. diff

    http://www.ruanyifeng.com/blog/2012/08/how_to_read_diff.html 读懂diff   作者: 阮一峰 日期: 2012年8月29日 diff是Un ...

  3. iOS中的多线程基础

    NSThread NSThread是一个苹果封装过的,面向对象的线程对象.但是它的生命周期需要我们自己来手动管理,所以使用不是很常见,比如[NSThread currentThread],它可以获取当 ...

  4. 常用 SQL语句

    Oracle 查看所有表的名字: select table_name from user_tables; 查询特定表的名字:select * from (select table_name t fro ...

  5. MyEclipse 2015 运行tomcat 内存溢出的解决方法

    内存溢出错误: 2016-3-16 11:19:55 org.apache.catalina.core.StandardWrapperValve invoke严重: Servlet.service() ...

  6. UVA 10277 Boastin' Red Socks

    #include <iostream> #include<cstdio> #include<cstring> using namespace std; unsign ...

  7. Template - Strategy

    模板模式是一种基于继承的松耦合模式,其设计思路为,abstract类提供一组接口但不实现,不同concrete类继承同一接口并完成不同功能.如下图所示: 模板模式实现较为简单,TemplateMeth ...

  8. Windows下将ImageMagick移植到Android平台

    Windows下将ImageMagick移植到Android平台 原文链接  http://www.pedant.cn/2014/06/18/imagemagick-ported-android/ I ...

  9. Air打包exe

    1.用flash创建一个airtest.fla,发布目标选择为AIR.ctrl+enter会得到如下文件: 2.把flex sdk的bin中找到adl.exe,复制过来,放置到:项目目录\bin\ad ...

  10. ListView random IndexOutOfBoundsException on Froyo

    http://stackoverflow.com/questions/8431342/listview-random-indexoutofboundsexception-on-froyo 今天遇到个 ...