这是一个比较正常的

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

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

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

那假如我想要一个朝下的三角形是不是我只要把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. tomee 消息持久化

    http://tomee.apache.org/jms-resources-and-mdb-container.html http://activemq.apache.org/xml-configur ...

  2. 使用PouchDB来实现React离线应用

    最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB. PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来 ...

  3. 圆角卖萌式登录表单和width的百分比值

    1.圆角恶意卖萌登录表单 小组要做一个网站,大学生社区那种,然后要做登陆界面然后还要做好看的登录界面,然后在书上看到了一个很漂亮的登陆界面,说来和一般的登陆界面没什么不同只是登录表单的边角被柔化了,变 ...

  4. Hbase随笔

    大数据时代的数据量是超大规模的,传统的关系数据库已经很难存储和管理这些数据了,为了存储海量数据,我们有了HDFS,它可以把成千上万台服务器上的硬盘聚集成一块超级大的硬盘,为了让这些数据产生价值,我们有 ...

  5. hdu 5661 Claris and XOR

    Claris and XOR Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...

  6. 一个demo让你彻底理解Android触摸事件的并发

    注:本文涉及的demo的地址:https://github.com/absfree/TouchDispatch 1. 触摸动作及事件序列 (1)触摸事件的动作 触摸动作一共有三种:ACTION_DOW ...

  7. PHP自带Session隐患(session文件独占锁引起阻塞)

    PHP自带Session隐患(session文件独占锁引起阻塞) PHP默认的会话处理器是session.save_handler = files(即文件).如果同一个客户端同时并发发送多个请求(如a ...

  8. python学习八皇后问题

    0 # -*- coding: utf-8 -*- 1 import random #冲突检查,在定义state时,采用state来标志每个皇后的位置,其中索引用来表示横坐标,基对应的值表示纵坐标,例 ...

  9. MyEclipse中如何安装插件（以Subclipse为例）[转]

    一.到官方上下载svn1.8.3,下载后的文件名叫site-1.8.3.zip 地址:http://subclipse.tigris.org/servlets/ProjectDocumentList? ...

  10. [后端人员耍前端系列]AngularJs篇：30分钟快速掌握AngularJs

    一.前言 对于前端系列,自然少不了AngularJs的介绍了.在前面文章中,我们介绍了如何使用KnockoutJs来打造一个单页面程序,后面一篇文章将介绍如何使用AngularJs的开发一个单页面应用 ...