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

用到知识：

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. 使用bind实现主从DNS服务器数据同步

    一.bind简介 Linux中通常使用bind来实现DNS服务器的架设,bind软件由isc(www.isc.org)维护.在yum仓库中可以找到软件,配置好yum源,直接使用命令yum instal ...

  2. windows身份验证无法登陆，错误: 18456

    升级win10后,出现这样的错误,sa可以登录,在http://bbs.csdn.net/topics/360071848中看到4#的解决办法 CREATE LOGIN [zhangzaocha-PC ...

  3. ASP.NET中使用Server.Transfer()方法在页间传值 实例

    以下代码在VS2008中测试通过 <%@ Page Language="C#" AutoEventWireup="true" CodeFile=" ...

  4. 【转】curl 查看一个web站点的响应时间(rt)

    原文: http://blog.csdn.net/caoshuming_500/article/details/14044697 1. curl 查看web站点rt curl -o /dev/null ...

  5. Guess the Array

    Guess the Array time limit per test 1 second memory limit per test 256 megabytes input standard inpu ...

  6. AFHTTPSessionManager

    // 取消所有请求 [self.manager.tasks makeObjectsPerformSelector:@selector(cancel)]; 使用场景: 比如一个界面有下拉刷新和上拉加载两 ...

  7. [转]MD5加密算法的java实现

    import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; /* * MD5 算法 */ pu ...

  8. codeforces 558/C Amr and Chemistry(数论+位运算)

    题目链接:http://codeforces.com/problemset/problem/558/C 题意:把n个数变成相同所需要走的最小的步数易得到结论,两个奇数不同,一直×2不可能有重叠枚举每个 ...

  9. Chapter 1 First Sight——16

    I drove around the school, following the line of traffic. 我开车绕学校随着交通线. 我开车穿过校园,紧跟着大部队. I was glad to ...

  10. php 连接 mssql sql2008

    摘要 sql server 2008 1.下载微软提供的dll 下载地址:http://www.microsoft.com/en-us/download/details.aspx?id=20098 p ...