一般情况下, 我们设置盒子的宽高度, 及上下左右边框, 具体代码如下:

通过上述代码,div的具体样式如下:

现在在上面基础上, 我们把div的宽高度都设为0时,

现在我们再次查看效果,如下图:

这时, 其实我们已经看到有上下左右四个三角形了....如果, 我们把4种颜色, 只保留一种颜色, 余下3种颜色设置为透明(或者设置为和背景色相同的颜色), 那不就出现一个小三角了么

具体代码如下:

效果图如下:

以上就是制作三角形的方法,制作娶她图形也是大同小异,大家可以自行测试组拼图形。

用border或者div制作三角形等图形的更多相关文章

  1. 利用border制作三角形原理

    网站前端页面中,有时候会使用一些三角形,除了使用图片的方式之外,利用css的border属性也可以做出相对应的三角形.那么,利用border是如何实现三角形的制作的呢? 先看下面一个例子: CSS代码 ...

  2. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  3. css制作三角形,下拉框三角形

    网站制作中常常需要下拉框,而如果下拉框如果只是单纯的矩形则会显得太过单调,所以这次教大家利用css制作三角形放在矩形上面 首先利用css制作三角形 div { width:0px; height:0p ...

  4. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  5. css制作tips提示框,气泡框,制作三角形

    有时候我们的页面会需要这样的一些提示框或者叫气泡框,运用css,我们可以实现这样的效果. 为了实现上面的效果,我们首先要理解如何制作三角形. 当我们给一个DIV不同颜色的边框的时候,我们可以得到下面的 ...

  6. div css 伪类 不固定图片大小 居中, css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  7. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  8. 用css制作三角形

    用css制作三角形,主要是利用css元素给“盒模型”设置边框得到的. 上图,上边框和做边框,以及上边框和右边框的交合处,浏览器会按照直角的二分之一处绘制交合线.这是“盒模型”有宽和高时候的效果.我们假 ...

  9. css+div制作圆角矩形的四种方法

    圆角矩形一向是设计师最倾心的一种设计,因为他们可以让整个网页生动起来,不那么死板,所以,作为一个优秀的网页设计师,学会一种或多种编辑圆角矩形的方法是必不可少的,而且圆角矩形应用范围极广,一个网页内的所 ...

随机推荐

  1. 如何做到机器学习竞赛Kaggle排名前2%

    原创文章,同步首发自作者个人博客 .转载请务必在文章开头显眼处注明出处 摘要 本文详述了如何通过数据预览,探索式数据分析,缺失数据填补,删除关联特征以及派生新特征等方法,在Kaggle的Titanic ...

  2. STM32学习笔记(一)——点亮一个LED

    引言 最近报名了2017全国大学生电子设计竞赛,我们学校是第一次参加这个比赛,由于8/9月份就要比赛了,所以现在准备是比较晚的了,指导老师说只能做控制类的题目了,让我们学习一下STM32单片机,51到 ...

  3. Mac Hadoop2.7.2的安装与配置

    这里介绍Hadoop 2.7.2在mac下的安装与配置. 安装及配置Hadoop 首先安装一下Hadoop $ brew install Hadoop 配置ssh免密码登录 用dsa密钥认证来生成一对 ...

  4. linux下删除乱码文件、目录

    由于编码原因,在linux服务器上上传.创建中文文件或目录时,会产生乱码,如果想删除它,发现用rm命令是删除不了的 这种情况下,用find命令可以删除乱码的文件或目录. 首先进入乱码文件或目录所在的目 ...

  5. Apache Ranger对HDFS的访问权限控制的原理分析(一)

    介绍 Aapche Ranger是以插件的形式集成到HDFS中,由Ranger Admin管理访问策略,Ranger插件定期轮询Admin更新策略到本地,并根据策略信息进行用户访问权限的判定.Rang ...

  6. Mac os下安装brew

    1.首先没下载xcode,请先安装xcode,安装的继续往下面看 2.安装brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubuser ...

  7. python自动化开发-[第一天]-基础数据类型与编码

    1.Python与其他语言对比 - C语言的解释方式  代码-->机器码-->计算机 - python,java,php等高级语言的解释方式  代码-->字节码-->机器码-- ...

  8. 【算法系列学习】线段树 区间修改,区间求和 [kuangbin带你飞]专题七 线段树 C - A Simple Problem with Integers

    https://vjudge.net/contest/66989#problem/C #include<iostream> #include<cstdio> #include& ...

  9. 简析ASP.NET WebApi的跨域签名

    之前的文章写了关于WebApi的跨域问题,当中的方法只是解决了简单请求的跨域问题而非简单请求的跨域问题则没有解决. 要弄清楚 CORS规范将哪些类型的跨域资源请求划分为简单请求的范畴,需要额外了解几个 ...

  10. Ajax与Pjax请求在服务端是如何识别的

    我在后台处理ajax和一般的网页请求时,一般是需要额外加个参数进行区分的.比如使用get参数的is_ajax=1,后台判断有is_ajax=1成立时,表明该请求是ajax请求,遂可区分处理.我正在使用 ...