今天一个刚开始学习html 的小白问我一个问题,css 可以实现正方形,长方形,和圆型(border-radius),怎么能做出个三角形、梯形等等形状呢?于是我便开启了装逼模式, 给他讲解了一下我的思路,在我的帮助下, 他终于用css 做出了自己的三角形、梯形。我表示很欣慰, 于是,为了帮助更多像我这个朋友一样基础的小白,我决定献丑,把我的思路,和做法写成一篇博文,分享给大家。

  闲话少叙,开始!

  1,首先,我创建了一个 class 名为 ‘box’ 的div,我们暂且亲切的称它为‘小盒子’

  html:

    <div class='box'>
</div>

  css:

 <!--小盒子的样式-->
.box
{
width:20px;
height:20px;
background-color:blue;
}

  我们看一下效果, 其实就是一个普通的,背景颜色为蓝色的div。

  

  2,然后,我们给‘小盒子’添加四条边框样式,边框设置的宽一点, 四条边框的颜色给不一样的值, 方便我们查看,

  

.box
{
width:50px;
height:50px;
background-color:blue; border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

  看看效果, 已经是一个比较花哨的存在了。

  

  3,然后,我们把‘小盒子’的宽高设置为0px,去掉蓝色的背景色, 当然就只剩下四周的边框了,脑补一下, 然后我们上代码,看卡效果。

.box
{
width:0px;
height:0px; border-top:50px solid red;
border-right:50px solid yellow;
border-bottom:50px solid green;
border-left:50px solid pink;
}

  来,上效果,look一下!童鞋们, 我么似乎已经看到了4个颜色不同的三角形了,接下来要做的步骤,就很清晰了。

  

  4,假设我们想要一个向上的三角形,只要把‘小盒子’上、右、左 方向边框的颜色设置为透明, 就只剩下下边框,也就是向上的小三角了, 来上代码,look一下!

  

        .box
{
width:0px;
height:0px; border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0);
}

  看效果!绿色的向上的小三角就出现了, \(^o^)/

  

-------------------------------第一阶段-总结-------------------------------------

  通过上面的操作,我们已经成功的用css 做出了小三角形,是不是很简单。

  上面我说过了,也可以做出梯形,该怎么做呢? 下面我们一起学习一下。↓

------------------------------------css做梯形---------------------------------------------

  我们先理理思路,大家想一想,梯形是怎么构成的,小学的数学课本都讲过的,就拿等腰梯形来说, 是由两个直角三角形,和一个长方形或正方形组成的,看草图↓

  

  这意味着,我们要用三个‘小盒子’来拼接成一个梯形,这么一说大家的思路是不是豁然开朗了,

  不多说,来,继续分析,

  1,首先,做三个‘小盒子’  1号,和3号小盒子都做成小三角形,2号小盒子做成一个正方形。

  html:

    <div class='box'>
</div>
<div class='box2'>
</div>
<div class='box3'>
</div>

  css:

        .box,.box3
{
width:0px;
height:0px; border-top:50px solid rgba(0,0,0,0);
border-right:50px solid rgba(0,0,0,0);
border-bottom:50px solid green;
border-left:50px solid rgba(0,0,0,0); margin-bottom:10px;
} .box2
{
width:50px;
height:50px;
background-color:green;
}

  先看看效果↓

  

  2,有人要问了, 形状是出来了, 但是怎么拼起来呢,这里就要用到css中的定位指示 和 css3 里的transfrom 了。不了解的话,w3c里都有详细的解释,我这里只管实现我们要的效果。

  3,先把所有的‘小盒子’排成一排,使块状元素排成一排的方法 :可以给‘小盒子’加 浮动 float,也可以直接设置‘小盒子’的display:inline-block;由于我的习惯是只要加浮动, 就要给父元素清浮动,比较麻烦,我就直接设置‘小盒子’的display:inline-block 了。

  

  4,最后设置一下 1号,和3号小盒子 的位移 就ok了, 看代码↓

       .box{
transform: translate(54px,10px);
}
.box3{
transform: translate(-54px,10px);
}

  再看看效果↓

  

  介绍到这里, 我们已经用css 把梯形做出来了, 还有其他的图形, 比如平行四边形等,类似的东西,举一反三,都可以通过这种方法做出来,在这里我就不一一介绍了。最后,祝大家学习愉快。

  

纯css 实现 三角形、梯形等 效果的更多相关文章

  1. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  2. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  3. CSS学习笔记(8)--纯CSS绘制三角形(各种角度)

    纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单.   我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...

  4. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  5. 【面试题】纯css实现三角形,你知道如何实现吗?

    纯css实现三角形 点击打开视频教程 <template> <div id="app"> <!-- 纯css实现三角形书写 --> <di ...

  6. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  7. 纯CSS实现的风车转动效果特效演示

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 【CSS】纯css实现立体摆放图片效果

    1.  元素的 width/height/padding/margin 的百分比基准 设置 一个元素 width/height/padding/margin 的百分比的时候,大家可知道基准是什么? 举 ...

  9. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  10. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

随机推荐

  1. 货车运输(LCA+最大生成树)

    神奇传送门 恩,这是一道神奇的LCA+难度的题目. 题目是这样的: A 国有n座城市,编号从1到n,城市之间有 m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有 q辆货车在运输货物,司机们 ...

  2. v4l2读取摄像头程序流程解析【转】

    转自:https://my.oschina.net/u/1024767/blog/210801 v4l2 操作实际上就是 open() 设备, close() 设备,以及中间过程的 ioctl() 操 ...

  3. C++11 lambda表达式(19篇C++11文章)

    C++11引入了lambda表达式,使得程序员可以定义匿名函数,该函数是一次性执行的,既方便了编程,又能防止别人的访问. Lambda表达式的语法通过下图来介绍: 这里假设我们定义了一个如上图的lam ...

  4. mysql故障(主从复制sql线程不运行)

    故障现象: 进入slave服务器,运行: mysql> show slave status\G ....... Relay_Log_File: localhost Relay_Log_Pos: ...

  5. 常用PHP数组函数总结

    1.array_values()  以索引数组的形式返回数组的中所有元素的值 array_keys()  以索引数组的形式返回数组的中所有元素的值 2.in_array()   检查数组中是否存在某值 ...

  6. Ubuntu 搭建 ***

    在Ubuntu下安装ss很简单.只需要依次执行下面3条命令: apt-get update apt-get install python-pip pip install shadowsocks pip ...

  7. Java IO 学习(六)Java的Direct Memory与IO

    ByteBuffer的源码中有这样一段注释: A byte buffer is either direct or non-direct. Given a direct byte buffer, the ...

  8. (33)C#正则表达式

    正则表达式:专门用于字符串处理的语言,用来描述字符串特征的表达式 元字符 . 之间可以出现任意单个字符(除了\n 换行) 例如: a.b   意思是这个表达式必须是三个字符,第一个字符是a,第三个字符 ...

  9. SPOJ 3267 DQUERY - D-query (主席树)(区间数的种数)

    DQUERY - D-query #sorting #tree English Vietnamese Given a sequence of n numbers a1, a2, ..., an and ...

  10. eleasticsearch重要配置

    elasticsearch重要配置=====================================日志和数据目录-----------------path:    logs: /var/lo ...