甘肃龙网

  1. 首页 > 生活 > >

用CSS实现三角形、等腰梯形等根本原理以及编码实现

生活百科三角

实现原理
关键实现因素在于的top right left 属性，看下面这样一段css样式：
.triangle {height: 0px;width: 0px;border-top: 50px solid gold;border-right: 50px solid gray;border-bottom: 50px solid green;border-left: 50px solid yellow;}
生成的样式是
，当然如果你觉得分别设置四个有点冗杂，你去掉了某一个，比如去掉-left这一行，你会发现上图变成了这样
，这样好像离答案近了一步 。

用CSS实现三角形、等腰梯形等根本原理以及编码实现

文章插图
三角形
接下来如果需要下面绿色的三角形，我们需要将上面两三角形设为好像隐形一样，这就需要 的另一个属性值，将上面代码改为
.triangle {height: 0px;width: 0px;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid green;}
此处我们想要的三角形就得到了，图片就不显示出来了 。
等腰梯形
在已经实现的三角形基础上，能想到再画一个这样的三角形和正方形拼接一下能得到等腰梯形，三个div实现效果如图，
用CSS实现三角形、等腰梯形等根本原理以及编码实现

文章插图
，但是这三个div由于是块级元素，要想拼接，我们得给它设置显示位置，可以通过浮动或-block，在这里选择后者，得到这样一张图
，到这一步大家都知道怎么做了，将左边和右边的三角形都移动一下，需要用到的某属性值就okk啦 。
最终效果
实现代码如下


    上一篇：利用js和css实现俄罗斯方块

    下一篇：乳晕嫩红素有效果吗,乳晕嫩红素有用吗