这是一个比较正常的

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

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

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

那假如我想要一个朝下的三角形是不是我只要把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. 解决Chrome重启后插件被禁用的问题

      下载组策略模版,添加白名单 http://pan.baidu.com/s/1o88kcZo 打开组策略 win+r 打开运行,输入 gpedit.msc 添加模版 右键 ->管理模版 -&g ...

  2. Build Android Webrtc Libjingle Library On Ubuntu

    Our team is developing an app to help people solve problem face to face. We choose webrtc protocol a ...

  3. Hyper-v虚拟机文件VHDX与VHD的格式转换

    今天遇到一个坑,我在本机(windows 10)上创建的CentOS虚拟机作为docker的宿主机,部署了gitlab等容器,准备迁移到服务器上的时候,发现始终无法导入,提示必须通过Hyper-v导出 ...

  4. Object-C中一些不同于C系列语言表现的特性

    这段时间体验和学习OC,虽然这么多年基本都在使用C系列语言(C,C++,C#),但是仍然有很多的不习惯. 当然,这些不习惯不代表讨厌或者不好,也许这些就是OC作为Apple开发首选语言而显得特殊的一些 ...

  5. IOS竖屏应用单个页面横屏的解决办法

    昨天朋友问我,怎么实现在竖屏的应用里,显示一个横屏的应用,由于也没做过 就说不知道了,但是我觉得会有这样的API ,因为我手机里就安装有这种类型的软件 今天早上起来,就想做一个Demo出来,惯例的是查 ...

  6. 《Memcache学习总结》[PDF]发布

    <Memcache学习总结>[PDF]发布 百度网盘共享: http://pan.baidu.com/s/1mgvayQO  版本号: V1.2 最后跟新: 2015-04-01 讨论组: ...

  7. 黑马程序员+ADO.Net基础(下)

    ---------------<a href="http://edu.csdn.net"target="blank">ASP.Net+Android ...

  8. PAT/查找元素习题集

    B1004. 成绩排名 (20) Description: 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. Input: 每个测试输入包含1个测试用例,格式为: 第1行: ...

  9. 解剖SQLSERVER 第二篇 对数据页面头进行逆向（译）

    解剖SQLSERVER 第二篇  对数据页面头进行逆向(译) http://improve.dk/reverse-engineering-sql-server-page-headers/ 在开发Orc ...

  10. 软件工程课设day3

    下载昨日新版本程序,完成修复项目的测试. 与组内成员讨论,确认项目新模块功能“吐槽墙”的设计方向与实现形式——因为项目为便捷工具类,社区形式的实现方式与项目本质背道而驰.因此决定以“点击目标课程条目, ...