用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. 【C++并发实战】（三） std::future和std::promise

    std::future和std::promise std::future std::future期待一个返回,从一个异步调用的角度来说,future更像是执行函数的返回值,C++标准库使用std::f ...

  2. java.lang.StackOverflowError: null

    异常信息 java.lang.StackOverflowError: null at sun.misc.FloatingDecimal$BinaryToASCIIBuffer.dtoa(Floatin ...

  3. Node.js如何找npm模板

    首先需要去官网下载npm文件 https://www.npmjs.com/ 下载完成,使用CD查看是否安装完成 然后就是贴代码看npm模板的功能 var _ = require('underscore ...

  4. git杂记-记录每次更新到仓库

    git status 和 git diff的运用 git status 记录的是关于仓库文件是否有变更,例如是否被修改,是否被添加到暂村区.至于文件更改了什么内容该命令并不关心: git status ...

  5. 纯css 画气泡

    我们知道运用css可以绘画出各式各样的形状:三角形,圆形,正方形,椭圆形,平行四边形等等,而通过他们之间进行两两组合可以变换出各种意想不到的效果图,气泡框就是其中一个.最简单的气泡框就是一个矩形框+一 ...

  6. express中间件笔记整理

    expressexpress概念:express是基于nodejs的HTTPS模块构建出来的一个web应用开发框架,在nodejs之上扩展了 Web 应用所需的基本功能.本质上express应用就是调 ...

  7. Qt初学——我的第一个UI

    第一次打开Qt的时候,我是一脸懵逼的.没学过c++,里面的程序都看不懂.按照套路,我开始看教程,上手实践.连着搞了3天之后,我开始渐渐明白怎么写UI. 我现在的理解是:UI = 界面设计 + 信号槽响 ...

  8. vim常用快捷汇总

    移动光标的方法 h 或 向左箭头键(←) 光标向左移动一个字符 j 或 向下箭头键(↓) 光标向下移动一个字符 k 或 向上箭头键(↑) 光标向上移动一个字符 l 或 向右箭头键(→) 光标向右移动一 ...

  9. winform界面开发-HTML内容编辑控件

    参照及推荐博客:伍华聪 http://www.cnblogs.com/wuhuacong/archive/2009/07/07/1518346.html http://www.cnblogs.com/ ...

  10. C/C++面试问题分类大汇总 ZZ 【C++】

    http://www.mianwww.com/html/2014/05/21208.html 指针和引用的区别 指针指向一块内存,它的内容是指向内存的地址:引用是某内存的别名 引用使用是无需解引用,指 ...