在我们看到类似于这样的图片时:

我们一般都会想,哎,这还不简单,用一张图片就可以了。
的确,用图片可以很轻松地做到。不过我们接下来要讨论的是:
如何用css也作出这样的效果。
 
首先,我们来定义一个div:
<div class="up"></div>
然后给它增加一些样式:
.up{
  width: 50px;
  height: 50px;
  background-color: red;
  font-size: 0px;
  line-height: 0px;
}
 
结果如图:
你TM逗我呢,这明明是正方形好吗!
好好好,别急,放下你手中的砖头,我们不妨设置一下它的边框。
.up{
  width: 50px;
  height: 50px;
  background-color: red;
  border:50px solid green;
  font-size: 0px;
  line-height: 0px;
}
然后就变成这样:
 你这是在找死
好的好的,别急,我说最后一句:
我们尝试着把它的四个边框的颜色改成不一样。
.up{
  width: 50px;
  height: 50px;
  background-color: red;
  border-top: 50px solid green;
  border-right: 50px solid yellow;
  border-bottom: 50px solid blue;
  border-left:50px solid black;
  font-size: 0px;
  line-height: 0px;
}
结果如下:
 好像有点意思
好的,别急,我们再尝试着把div的宽度和高度都设置为0;
.up{
  width: 0px;
  height: 0px;
  background-color: red;
  border-top: 50px solid green;
  border-right: 50px solid yellow;
  border-bottom: 50px solid blue;
  border-left:50px solid black;
  font-size: 0px;
  line-height: 0px;
}
结果:
好的,我们得到了四个三角形,
现在,我们要得到方向指向上的那个蓝色的三角形,所以我们把其他三角形的背景颜色设置成透明的,并且去掉之前设置的背景颜色:
.up{
  width: 0px;
  height: 0px;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid blue;
  border-left:50px solid transparent;
  font-size: 0px;
  line-height: 0px;
}
 
 好的 ,掌声在哪里?
我知道你想说什么,我们仔细观察,发现其实上边框是不必要的,因为它不影响我们下面的那个三角形的大小和形状,所以我们去掉上边框,然后再调整一下背景颜色:
.up{
  width: 0px;
  height: 0px;
  border-right: 50px solid transparent;
  border-left:50px solid transparent;
  border-bottom: 50px solid #6699cc;
  font-size: 0px;
  line-height: 0px;
}
 
完成了。
按照这种方法,我们可以制作四个方向上的三角形:
完整的代码:
html:
 <div class="up"></div>
<div class="right"></div>
<div class="down"></div>
<div class="left"></div>
 
css:
 .up,.right,.down,.left{
width: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
}
.up{
border-right: 50px solid transparent;
border-left:50px solid transparent;
border-bottom: 50px solid #6699cc;
}
.right{
border-bottom: 50px solid transparent;
border-top:50px solid transparent;
border-left: 50px solid green;
}
.down{
border-top: 50px solid yellow;
border-right:50px solid transparent;
border-left: 50px solid transparent;
}
.left{
border-right: 50px solid red;
border-top:50px solid transparent;
border-bottom: 50px solid transparent;
}
 
完整的效果图:
 
 
 
 

利用CSS制作三角形的更多相关文章

  1. css制作三角形,下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  2. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  3. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  4. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  5. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  6. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  7. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  8. 利用CSS制作脸书

    很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...

  9. 利用 css 制作简单的提示框

    在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...

随机推荐

  1. linux------------centos防火墙

    CentOS7默认的防火墙不是iptables,而是firewalle. 你可以用rpm -qa | grep iptables来查看,一般会出现两个一个是iptables 另一个是iptables. ...

  2. win10 pro 1511 激活成功

    slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms franklv.ddns.net slmgr /ato

  3. 怎么在js中,访问viewbag,viewdata等等的值

    在js中要访问viewbag,viewdata存储的值, var ss='@ViewBag.name'; 一定要加引号,单双随便,还有, ViewBag一定要写规范,不然会编译错误! 成功者的秘诀就是 ...

  4. WebSQL 查询工具

    最近在写 WebSQL ,每次都在浏览器控制台执行 SQL 太费劲了,并且脑子不好使,总是忘记上次初始化的数据库是什么,所以写了一个特别简单的 WebSQL 可视化工具,说工具有点大了,就是为了方便, ...

  5. html5,格式的验证

    <form action="" method="get">    <input type="text" name=&quo ...

  6. Foundation框架

    1.框架是由许多类.方法.函数.文档按照一定的逻辑组织起来的集合,以便使研发程序变的更容易 清除缓存,删除这个文件夹下的所有文件/Users/fanyafang/Library/Developer/X ...

  7. MQ通道配置

    转自:http://www.cnblogs.com/me115/p/3471788.html MQ通道配置 通道是用来连接两个队列管理器的: 在单个队列管理器内读写消息不需要建立通道:但在一个队列管理 ...

  8. qt qml qchart 图表组件

    qt qml qchart 图表组件 * Author: Julien Wintz * Created: Thu Feb 13 23:41:59 2014 (+0100) 这玩意是从chart.js迁 ...

  9. Android 开发命令行完全攻略

    作为命令行的爱好者,我想写这个主题已经有好一段时间了.除了显得很酷之外,命令行的使用能够提高我们的开发效率,因为相比通过鼠标点击一系列的菜单选项,使用键盘输入几个字符并点击 TAB 健显然会快很多. ...

  10. z-index 详解

    Definition and Usage The z-index property specifies the stack order of an element. An element with g ...