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

通过上述代码,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. linux awk 命令详解

    awk是一个非常棒的数字处理工具.相比于sed常常作用于一整行的处理,awk则比较倾向于将一行分为数个"字段"来处理.运行效率高,而且代码简单,对格式化的文本处理能力超强.先来一个 ...

  2. Excel import

    Case Study: Reading cell content from excel template for COM variant type VT_R4 or VT_R8 is always l ...

  3. python的MySQLdb模块在linux环境下的安装

    开始学习python数据库编程后,在了解了基本概念,打算上手试验一下时,卡在了MYSQLdb包的安装上,折腾了半天才解决.记录一下我在linux中安装此包遇到的问题.系统是ubuntn15.04. 1 ...

  4. ruby错误

    ActiveRecord::StatementInvalid in WelcomeController#index ActiveRecord::StatementInvalid in WelcomeC ...

  5. 分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置(单点安装)——第一篇

    分布式文件系统 FastDFS 5.0.5 & Linux CentOS 7 安装配置(单点安装)--第一篇 简介 首先简单了解一下基础概念,FastDFS是一个开源的轻量级分布式文件系统,由 ...

  6. Ajax (AppServ服务器练习)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  7. C++ 头文件系列(system_error)

    1.为什么system_error "....report error conditions originating from the operating system or low-lev ...

  8. [Day01] Python基础

    明天要完成的任务如下:  Python 四则运算 Python 数据结构 Python 元算符(in.not in.is.and.or) 用户输入 (input.raw_input) 流程控制 缩进 ...

  9. hdu1150 Machine Schedule 经典二分匹配题目

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1150 很经典的二分题目 就是求最小点覆盖集 二分图最小点覆盖集=最大匹配数 代码: #include& ...

  10. ssm框架整合+maven项目创建

    在引入外部maven插件后就可以创建一个maven项目了,这篇文章主要介绍ssm框架的整合和如何创建一个maven项目 1.在开发工具的项目空白区单击右键,依次选择New.Other,会出现如下界面, ...