这是一个比较正常的

但如果我们把宽度和高度去掉呢？

好像看不太出来对吧，我们来给边框加上不同颜色。

看出啥了没，分明就是每个边都是一个三角形啊。

那假如我想要一个朝下的三角形是不是我只要把border-top给显示出来，其他的隐藏就好了啊。OK，说干就干

transparent表示透明，所以可以当做隐藏来使用。你可能会说那直接只设置border-top不就好了吗，但你可以发现是不行的，你试试就知道了。

单个：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #item1{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-top:30px solid red;

         }

         #item2{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-left:30px solid green;

         }

         #item3{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-bottom:30px solid pink;

         }

         #item4{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-right:30px solid lightblue;

         }

     </style>

 </head>

 <body>

     <div id="item1"></div>

     <div id="item2"></div>

     <div id="item3"></div>

     <div id="item4"></div>

 </body>

 </html>

两个组合：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #item1{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-top:30px solid red;

             border-right:30px solid red;

         }

         #item2{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-top:30px solid green;

             border-left:30px solid green;

         }

         #item3{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-top:30px solid pink;

             border-bottom:30px solid pink;

         }

         #item4{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-right:30px solid lightblue;

             border-bottom:30px solid lightblue;

         }

         #item5{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-right:30px solid lightsalmon;

             border-left:30px solid lightsalmon;

         }

         #item6{

             width:0px;

             height:0px;

             border:30px solid transparent;

             border-bottom:30px solid red;

             border-left:30px solid red;

         }

     </style>

 </head>

 <body>

     <div id="item1"></div>

     <div id="item2"></div>

     <div id="item3"></div>

     <div id="item4"></div>

     <div id="item5"></div>

     <div id="item6"></div>

 </body>

 </html>

三个组合：

代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         #item1{

             width:0px;

             height:0px;

             border-left:30px solid transparent;

             border-top:30px solid red;

             border-right:30px solid red;

             border-bottom:30px solid red;

         }

         #item2{

             width:0px;

             height:0px;

             border-bottom:30px solid transparent;

             border-top:30px solid green;

             border-right:30px solid green;

             border-left:30px solid green;

         }

         #item3{

             width:0px;

             height:0px;

             border-right:30px solid transparent;

             border-top:30px solid pink;

             border-left:30px solid pink;

             border-bottom:30px solid pink;

         }

         #item4{

             width:0px;

             height:0px;

             border-top:30px solid transparent;

             border-right:30px solid lightblue;

             border-left:30px solid lightblue;

             border-bottom:30px solid lightblue;

         }

     </style>

 </head>

 <body>

     <div id="item1"></div>

     <div id="item2"></div>

     <div id="item3"></div>

     <div id="item4"></div>

 </body>

 </html>

配合宽度使用。

注意宽度别超过边框长度。

平行四边形

完。

利用border属性制作各种图形。的更多相关文章

  1. css 利用border属性制作箭头 Using Borders to Make Pure CSS Arrows

    不再需要多余的图片 用border属性自然能创造箭头效果 学习地址:http://tech.patientslikeme.com/2010/11/09/using-borders-to-make-pu ...

  2. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS深入了解border：利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  4. 2017年总结的前端文章——border属性的多方位应用和实现自适应三角形

    border属性是在实际的应用中使用频率比较高的一个属性,除了作为边框使用,利用border属性的一些特征以及表现方式,可以在实现一些比较常见的效果(如等高布局,上下固定内容滚动布局和绘制CSS图标等 ...

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

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

  6. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  7. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  8. CSS：不可思议的border属性

    原文:Magic of CSS border property 译文:不可思议的CSS border属性 译者:dwqs 在CSS中,其border属性有很多的规则.对于一些事物,例如三角形或者其它的 ...

  9. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

随机推荐

  1. Cobbler学习之二--Cobbler的Web管理和维护

    Cobbler的Web管理模块和命令行模块是可以分开工作的,没有依赖关系. 1 WebUI的功能 查看所有的对象和配置文件 添加或者删除system,distro, profile 执行“cobble ...

  2. Web测试基础点

    摘自:软件工程师成长之路 1.获取当前使用的Flash播放器版本(Flash Player Version)信息 在浏览器地址栏输入http://www.playerversion.com/,即可显示

  3. Navicat Premium下sql导入中文乱码解决方案

    今天帮忙朋友找bug的时候,准备导入她数据库里面的数据,所以我就试图在mysql管理工具Navicat下面导入相应的mysql命令.结果发现导入的中文字符全部变成乱码,所以做了如下这种尝试: 在“连接 ...

  4. PL/SQL通过存储过程为相同数据添加序号

    在Oracle数据库中存有一串数据(Ori_Seq),数据包含不等量重复: 为方便查看与管理,现希望添加一字段(New_Seq),在原有数据的末尾为其添加一串序号,相同数据序号从小到大排列,序号长度为 ...

  5. 第8章 NAND FLASH控制器

    8.1 NAND Flash介绍和NAND Flash控制器使用 NAND Flash在嵌入式系统中的地位与PC上的硬盘类似 NAND Flash在掉电后仍可保存 8.1.1 Flash介绍 有NOR ...

  6. java类集开发中一对多和多对多的关系的实现

    摘自<java开发实战经典>李兴华.著 一对多的关系 一个学校可以包含多个学生,一个学生属于一个学校,那么这就是一个典型的一对多关系,此时就可以通过类集进行关系的表示. 在定义Studen ...

  7. xml文档解析

    XML文档解主要分为四种解析方式,官方提供的两种分别是:DOM 和 SAX,第三方分别是:JDOM 和 DOM4j 测试用的xml文档: <?xml version="1.0" ...

  8. java-android推送

    之前做的推送,考虑了很多,最后因为各个因素,选择了极光的.

  9. Getting Started with WebRTC [note]

    Getting Started with WebRTC 原文 RTCPeerConnection 1.caller和callee互相发现彼此 2.并且交换capabilities信息 3.初始化ses ...

  10. zabbix3.2安装graphtree3.0.4

    下载graphtree3.0.4 wget https://raw.githubusercontent.com/OneOaaS/graphtrees/master/graphtree3-0-1.pat ...