zoukankan      html  css  js  c++  java
  • 用css实现三角形

    通过上一篇文章大家应该都知道border的本质了吧,不清楚的同学可以去看一下这篇博文

    http://www.cnblogs.com/nini-huai/p/5917368.html

    下来我们说一下怎么实现各种三角形吧,先来说一下我自己的思路

    大家先看这张图片

    看过上一篇文章的应该都不陌生这个是怎样产生的,

    其实大家仔细观察,相信不难看出我们中间区域设置的是各个梯形的上底边,那么当我们设置中间区域width:0的时候,出现的上下两个梯形的上底边都为0了,即就是我们需要的上三角形和下三角形了,同理,设置height:0的时候,我们的左右两个梯形的上底边均为0,这样我们的左三角形和右三角形就出现,

                                 

    下来我们就想办法实现三角形,首先我们去掉中间的白色区域部分,即设置高宽为0,效果如下

    看到了吗,我们需要的各种三角形其实已经出来了,

    上三角:只需要设置其他三个border边框的颜色为背景色即可,同理我们可以得到下三角,左三角以及右三角

    现在我们做出来的都是直角的三角形,这是因为我们这是的border的宽度都是一样的,下来我们做一点不一样的

    设置宽高不一样的时候就出现如上如所示的形状,首先每个三角形都不是等边直角三角了,其次,我们还可以让他两个边框都显示,即上图中的黄色和红色区域可以构成一个尖锐的三角形,当然了,你也可以随便组合.

    我们可以利用这个做出一个简单的消息提示框,

    结束语

       我们可以利用border属性做出很多的例子,这里我就先介绍到这里,其中的好处,大家细细品味吧!! 

    每天进步一点点
  • 相关阅读:
    C语言第五次作业
    c语言第4次作业
    第12次作业
    C语言第9次作业
    C语言第8次作业2
    C语言第8次作业
    C语言第七次作业---要死了----
    C语言第七次作业
    物联网工程实践第二次作业
    物联网工程实践第一次作业
  • 原文地址:https://www.cnblogs.com/nini-huai/p/5919319.html
Copyright © 2011-2022 走看看