用border制作三角形

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 0;

            height: 0;

            /*boder-top 角向下  ，border-bottom 角向上*/

            border-top: 20px solid red;

            border-left: 20px solid transparent;

            border-right: 20px solid transparent;

        }

    </style>

</head>

<body>

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

</body>

</html>

css 尾巴的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  3. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  4. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  5. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  6. 深入理解css中vertical-align属性

    一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...

  7. 用CSS画小猪佩奇，你就是下一个社会人！

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  8. 《CSS世界》读书笔记（十五）

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  9. 73.纯 CSS 创作一只卡通狐狸

    原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...

随机推荐

  1. 零基础学python习题 - 进入python的世界

    1. python拥有以下特性:面向对象的特性.动态性.内置的数据结构.简单性.健壮性.跨平台性.可扩展性.强类型语言.应用广泛 2. python 需要  编译 3. 以下不属于python内置数据 ...

  2. 实现键盘记录的e.Whick和keyCode,兼容FireFox和IE

    主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结 第一部分:浏览器的按键事件 用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,k ...

  3. 改bug后 fix bug 时，一个不错的修复描述模板

    *问题原因:* 问题出现的原因.*解决方法:* 问题的解决方案.*影响分支:* 影响哪些分支. *相关修改:* 具体的修改文件列表.*自测结果:* 自行测试了哪些用例,将大概步骤描述出来. *影响功能 ...

  4. C#模拟HTTP POST 请求

    GET请求: /// <summary> /// 获取accessToken /// </summary> /// <param name="corpid&qu ...

  5. python之复数

    #coding=utf8 ''''' 复数是由一个实数和一个虚数组合构成,表示为:x+yj 一个负数时一对有序浮点数(x,y),其中x是实数部分,y是虚数部分. Python语言中有关负数的概念: 1 ...

  6. CentOS随笔 - 6.CentOS7安装Git服务器

    前言 转帖请注明出处: http://www.cnblogs.com/Troy-Lv5/ 版本管理当然是选择git..反正我是被svn坑怕了... 这次安装的是git 2.18.0 点击下载 准备安装 ...

  7. oracle 帐号scott被锁定 如何解锁

    由于多次输入:账号 密码不对 oracle 帐号scott被锁定 如何解锁: 具体操作步骤如下:C:> sqlplus请输入用户名:sys输入口令:sys as sysdba //注意:在口令这 ...

  8. cocos2dx加载骨骼动画，获取骨骼位置

    2015/05/13 需求: (1)希望在骨骼上绑定一个粒子特效 (2)获取骨骼的位置 (3)获取骨骼动画的大小 (4)lua 1. cocostudio动画编辑器 (1)绑定粒子特效(跟随骨骼的移动 ...

  9. 搭建企业级全网数据定时备份方案[cron + rsync]2

    1.1.1. rsync服务注意的问题 1.服务端 path=/backup/     -->带/ 2.客户端 rsync -avz /tmp/ rsync_backup@192.168.25. ...

  10. January 11 2017 Week 2nd Wednesday

    One always has time enough, if one will apply it well. 如果你能好好地利用,你总有足够的时间. If you always feel that y ...