我们在使用CSS框架的时候,经常会用到下拉框组件,一般该组件里面有个下三角。很多网上用到三角形,如图所示,这个三角形是如何实现的呢?

1.使用CSS可以实现,先来复习一CSS盒子模型相关知识。给出如下CSS代码:

  1. <style>
    .box{
    margin-top:100px;
    margin:100px auto 0;
    height: 20px;
    width: 20px;
    background-color: red;
    }
    </style>

网页body区域中使用如下代码:

  1. <div class="box"></div>

运行效果为:

2.在上面代码的基础上书写如下代码:

  1. <style>
    .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;
    }
    </style>

网页body区域中使用如下代码:

  1. <div class="box"></div>
    运行结果如下图所示。

  1. 将上面的CSS代码修改为如下:
  1. <style>
    .box{
    width:0px;
    height:0px;
    background-color:blue;
    border-top:50px solid red;
    border-right:50px solid yellow;
    border-bottom:50px solid green;
    border-left:50px solid pink;
    }
    </style>
  1. 运行如下图所示。

  1. 此时,三角形出现了。
  2.  
  3. 继续增加代码:
  4.  
  1. .triangle1{
    height:0px;
    width: 0px;
    border-style: solid;
    border-width: 50px;
    border-color: red transparent transparent transparent;/*transparent代表默认颜色*/
  1. font-size: 0;/*兼容性处理*/
    line-height: 0;

body区域增加下面代码:

  1. <div class="triangle1"></div>
  1. 运行结果如下:

可以测试一下下面这些三角型出现在哪些位置:

  1. border-color: transparent transparent transparent red;
  1. border-color:transparent red transparent transparent;
  1. border-color: transparent transparent red transparent;
  1. 2.前面提到的任务的实现:
  2.  
  1. <style>
    .div1{
    position: relative;
    height:100px;
    width: 200px;
    border:1px solid #dddddd;
    background-color: #fff;
    margin: 100px auto;
    }
    .triangle1{
    position: absolute;
    top: -40px;
    left:50%;
    margin-left:-20px ;
    width: 0;
    height: 0;
    border-style: solid;
    border-width:20px;
    border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color: transparent transparent #ddd transparent;
    line-height: 0;
    font-size: 0;
    }
    .triangle2{
    position: absolute;
    top: -38px;
    left:50%;
    margin-left:-19px ;
    width: 0;
    height: 0;
    border-style: solid;
    border-width:19px;
    border-style:solid dashed dashed dashed;/*IE6下, 设置余下三条边的border-style为dashed,即可达到透明的效果*/
    border-color: transparent transparent #fff transparent;
    line-height: 0;
    font-size: 0;
    }
  2.  
  3. </style>
  1.  
  2. body区域放置的代码:
  1. <div class="div1"><p class="triangle1"></p> <p class="triangle2"></p></div>
  1. 运行程序,结果如图所示。

  1. 原理是定义两个小三角型,这两个小三角形宽度是只相差1px,然后使用颜色与div1容器背景颜色相同的小三角形,也就是这里的
  1. triangle2去覆盖三角形triangle1,让三角形triangle1只留出两个斜边出来。注意下图中CSS定义中的差异。

资料参考:

https://www.cnblogs.com/monozxy/p/7903019.html

https://www.jianshu.com/p/1f32120a503b

https://www.cnblogs.com/linsinan/p/6928734.html

https://www.cnblogs.com/xxhuan/p/7657726.html

网页中三角型的CSS实现的更多相关文章

  1. Bootstrap css栅格 + 网页中插入代码+css表格

    设计达人 http://www.shejidaren.com/30-minimal-app-icons.html CSS栅格: <!DOCTYPE html> <html lang= ...

  2. 网页中如何用 CSS 设置打印分页符

    Word 中按 Ctrl + Enter 创建一个分页符,方便打印,其实网页中也可以,用 CSS 的 page-break-after:always;. <p>第 1 页</p> ...

  3. 前端开发css实战:使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  4. 利用CSS的@font-face属性 在网页中嵌入字体

    字体使用是网页设计中不可或缺的一部分.网页是文字的载体,我们希望在网页中使用某一特定字体,但是该字体并非主流操作系统的内置字体,这样用户在浏览页面的时候就有可能看不到真实的设计. 美工设计师最常做的办 ...

  5. CSS网页中的相对定位与绝对定位

    在CSS中有这样的一个指令:(position),在DreamWeaver中文版中翻译为“定位”,常用的属性有两个:relative(相对)与 absolute(绝对).有很多朋友对这条指令的用法还是 ...

  6. 通过CSS让html网页中的内容不可选

    *{ moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; ...

  7. 向网页中写入js和css

    向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...

  8. CSS在网页中应用的方式_嵌入式

    内联式样式表:直接写在现有的标记中,比如: 复制代码 代码如下: <p style="font-size:24px;">www.phpstudy.net</p&g ...

  9. 使用 CSS 选择器从网页中提取数据

    在 R 中,关于网络爬虫最简单易用的扩展包是 rvest.运行以下代码从 CRAN 上安装:install.packages("rvest")首先,加载包并用 read_html( ...

随机推荐

  1. python之event事件

    同进程的一样,线程的一个关键特性是每个线程都是独立运行且状态不可预测.如果程序中的其 他线程需要通过判断某个线程的状态来确定自己下一步的操作,这时线程同步问题就会变得非常棘手.为了解决这些问题,我们需 ...

  2. LeetCode Day 2

    LeetCode0004 给定两个大小为 m 和 n 的有序数组 nums1 和 nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O(log(m + n)). 你可以假设 n ...

  3. python3的数据类型转换问题

    问题描述:在自我学习的过程中,写了个登陆,在input处,希望能够对数据类型进行判断,但是因为python3的输入的数据会被系统默认为字符串,也就是1,1.2,a.都会被系统默认为字符串,这个心塞啊, ...

  4. Java反射的实例

    JAVA反射机制是在运行状态中,对于任意一个类,都能够得到这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法;         这种动态获取的信息以及动态调用对象的方法的功能称为ja ...

  5. 求最长公共子序列-DP问题

    Longest common subsequence problem The longest common subsequence (LCS) problem is the problem of fi ...

  6. EMP平台简介(转载)

    1.什么是EMP EMP平台是一个基于J2EE体系的.WEB应用的.基础框架平台: 表现逻辑框架(MVCFrameWork)与业务逻辑框架(EMPBizLogic)分离: 组件化.配置化设计技术: 可 ...

  7. js中对Object对象的一些常用操作总结

    前言我前面的文章,写过js中“类”与继承的一些文章.ES5我们可以通过 构造函数 或者 Object.create()等方式来模拟出js中的“类”,当然,对象呢是类的实例化,我们可以通过如下方式创建对 ...

  8. 吴裕雄--天生自然KITTEN编程:对话

  9. 微软Project Oxford帮助开发人员创建更智能的应用

    Oxford帮助开发人员创建更智能的应用" title="微软Project Oxford帮助开发人员创建更智能的应用"> 假设你是一名对关于健身的应用充满奇思妙想 ...

  10. 监控Linux系统所选的服务所占进程内存占用

    [代码] #!/bin/bash #程序功能描述: # 监控系统所选的服务所占进程内存占用 #作者:孤舟点点 #版本:1.0 #创建时间:-- :: PATH=/bin:/sbin:/usr/bin: ...