这是一个比较正常的

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

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

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

那假如我想要一个朝下的三角形是不是我只要把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. R语言数据处理利器——dplyr简介

    dplyr是由Hadley Wickham主持开发和维护的一个主要针对数据框快速计算.整合的函数包,同时提供一些常用函数的高速写法以及几个开源数据库的连接.此包是plyr包的深化功能包,其名字中的字母 ...

  2. 【转】浅谈html5网页内嵌视频

    转自 http://www.pchou.info/web/2014/01/30/52ea01e13a7f1.html

  3. if else 的令人防不胜防的奇葩错误

    if(a==t && b+c >a)  else flag=false; 这个语句乍一看没什么问题,如果a==t 成立b+c >a不成立-〉flag=false; 但是编译 ...

  4. 命令行解析Crash文件

    做了快两年的开发了,没有写过博客,最近公司app上架,程序崩溃被拒绝了,可是给的crash文件,又看不出哪里的问题,网上各种搜,终于找到了解决的办法,想想还是写个博客吧,希望给哪些也遇到这类问题的朋友 ...

  5. 转：如何调试PHP的Core之获取基本信息

    其实一直想写这个系列, 但是一想到这个话题的宽泛性, 我就有点感觉无法组织. 今天我也不打算全部讲如何调试一个PHP的Core文件, 也不会介绍什么是Coredump, 选择一个相对比较简单的方向来介 ...

  6. IO-04. 混合类型数据格式化输入(5)

    本题要求编写程序,顺序读入浮点数1.整数.字符.浮点数2,再按照字符.整数.浮点数1.浮点数2的顺序输出. 输入格式: 输入在一行中顺序给出浮点数1.整数.字符.浮点数2,其间以1个空格分隔. 输出格 ...

  7. linux系统添加硬盘方法

    [root@wen /]# fdisk -l[root@wen /]# fdisk /dev/sdb[root@wen /]# mkfs -t ext3 -c /dev/sdb1[root@wen / ...

  8. loadrunner agent 中删除失效的mmdrv进程

     源码: using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; us ...

  9. VC++ 19 (VS2015) 编译器系统环境变量配置

    Visual C++的cl.exe编译器是微软推出的编译器,干什么的怎么用也不赘述了.大多数情况都是直接在Visual Studio里写代码然后点击"播放"按钮让Visual St ...

  10. CentOs笔记

    系统 CentOs7,最小安装,使用 Ext4,/ ,/boot,/swap 使用标准分区,另一个分区做为数据分区,使用 LVM. 更新: http://mirrors.163.com/.help/c ...