这是一个比较正常的

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

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

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

那假如我想要一个朝下的三角形是不是我只要把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. (转)Linux下root密码丢失和运行级别错误的解决办法

    我们知道,root用户在Linux中是相当重要的,其地位如同Windows中的Adminstrator 有了root权限我们还能修改其他用户的密码,可是,如果root用户的密码丢失该怎么办? 不用担心 ...

  2. golang坑1

    :=比较方便,不过今天掉进了一个小坑 var ( foo *XXX ) func bar() { fmt.Println(foo.abc) } func main() { foo, err := XX ...

  3. Python基于pandas的数据处理（一）

    import pandas as pd, numpy as np dates = pd.date_range(', periods=6) df = pd.DataFrame(np.random.ran ...

  4. iOS-延时操作汇总

    在iOS开发中,一个操作我们希望不要立刻执行,而是等上几秒之后再来处理,这时我们就需要延时处理,我们来看看这些方 1.最直接的方法performSelector:withObject:afterDel ...

  5. 日常工作中的点滴:C# 根据字节长度截包含中文的字符串

    方法中利用正则表达式判断某个字符是否是中文 public string SubStringB(string text,int length){ int target=0; int b=0; for(i ...

  6. uva 11806 Cheerleaders

    // uva 11806 Cheerleaders // // 题目大意: // // 给你n * m的矩形格子,要求放k个相同的石子,使得矩形的第一行 // 第一列,最后一行,最后一列都必须有石子. ...

  7. oracle根据视图删除表

    delete from t_fwaqjcjl where zcbm in (select zcbm from view_fwaqjcjl where 1=1 )

  8. android开发学习之Layer List

    Android中drawable分为Bitmap File.Nine-Patch File.Layer List.State List.Level List.Transition Drawable.I ...

  9. Swift-ImageView响应点击事件

    随着Swift语言的不断更新迭代,纯Swift语言编写的代码更加紧凑简单,结合StoryBorad的使用,使开发苹果APP的门槛降低了不少.个人也是比较推荐使用Interface Builder去生成 ...

  10. ASP.NET MVC3 Razor 初心者容易遇到的問題(转)

    这是一些相关的文章地址 http://demo.tc/Post/679 http://blog.csdn.net/cheny_com/article/details/6298496