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

用到知识：

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. 关于PHP静态方法调用和实例化类调用的区别

    1.首先来澄清一些观点 由于静态方法在内存中只有一份,无论你调用多少次,都是共用的,而且没有对象的概念,所以不能在静态方法里面使用$this调用,如果非得调用的话,只能实例化自身类 而实例化不一样,每 ...

  2. oracle数据库的数据类型

    一.字符类型 (1)固定长度的字符串 CHAR(字节长度是1~2000之间) CHAR(8)可以存储4个双字节的字符,8个单字节的字符,不足8字节剩余的部分用空格占据 (2)可变长度字符串 VARCH ...

  3. mvc动态生成a标签，多个属性，多个querystring

    1*服务端 客户端 跳转的url 2*服务端 客户端 跳转的url 3*服务端 客户端  跳转的url  4*服务端 客户端 跳转的url

  4. block 的演练和使用

    概念 block 是 C 语言的 是一种数据类型,可以当作参数传递 是一组预先准备好的代码,在需要的时候执行 动画 block 回顾 self.demoView.center = CGPointMak ...

  5. 准备着手学习python

    1. python 的框架 Tornado 网址: http://www.tornadoweb.org/en/stable/ github: https://github.com/tornadoweb ...

  6. 关于cin.getline和cin.get

    <C++ Primer Plus(第六版)> P124 第8题 #include <iostream> using namespace std;   struct Pizza ...

  7. linux shell 远程执行命令

    经常要部署多台服务器上面的应用,如果一个个机器的登录太麻烦. 所有就想到编写一个脚本来部署不同的服务器 前提条件: 配置ssh免登陆 如果不会的请参加我的另外一篇文章 http://blog.csdn ...

  8. 给input元素添加float. 去除IE6 下input的空隙

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. 栅栏cyclicbarrier

    栅栏类似闭锁,但是它们是有区别的. 1.闭锁用来等待事件,而栅栏用于等待其他线程.什么意思呢?就是说闭锁用来等待的事件就是countDown事件,只有该countDown事件执行后所有之前在等待的线程 ...

  10. Ubuntu下安装Intellij IDEA和PyCharm

    需要先安装JDK 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载 ...