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

用到知识：

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. 使用SQL Server 2000索引视图提高性能

    什么是索引视图? 许多年来,Microsoft? SQL Server? 一直都提供创建虚拟表(称为视图)的功能.在过去,这些视图主要有两种用途: 提供安全机制,将用户限制在一个或多个基表中的数据的某 ...

  2. cmd命令行查看当前系统版本和版本是32位还是64位

  3. jquery 高亮

    <ul> <li id="0">冬瓜很好吃</li> <li id="1">西瓜不好吃</li> & ...

  4. launchMode传递参数注意startActivityForResult

    Activity1 到Activity2 用startActivityForResult 如果Activity2的launchMode为 singleInstance 和 singleTask 都会启 ...

  5. 5.1 timestamp数据类型默认值

    5.1 不支持同一张表中有多个tmiestamp类型字段的默认值为current_time,  5.6版本无此问题

  6. asp:cookies的属性

    Expires – 过期时间.指定cookie的生命期.具体是值是过期日期.如果想让cookie的存在期限超过当前浏览器会话时间,就必须使用这个属性.当过了到期日期时,浏览器就可以删除cookie文件 ...

  7. HDU1258 Sum it up

    Sum it up 题意:给定一个数sum,和n个数,求sum可以由这n个数里面的那几个数的和表示. Given a specified total t and a list of n integer ...

  8. CodeIgniter 如何去掉 Index.php

    步骤; 1.打开你的WEB服务器的httpd.conf文件. 2.找到LoadModule rewrite_module modules/mod_rewrite.so这行,把该行前的#去掉.保存该文件 ...

  9. 自动打开notepad 并写入数据

    import java.awt.AWTException; import java.awt.Robot; import java.awt.event.KeyEvent; import java.io. ...

  10. Theos tweak MSHookFunction

    #import "substrate.h" static FILE * (*s_orig_fopen) ( const char * filename, const char * ...