用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. Working C# code for MySql5.5 Stored Procedures IN parameters

    MySQL5.5存储过程: #插入一条 涂聚文 DELIMITER $$ DROP PROCEDURE IF EXISTS `geovindu`.`proc_Insert_BookKindList` ...

  2. CSS(一）sytle

    一:CSS语法组成:  选择符 和声明(声明和声明之间用分号隔开)  声明部分:属性和属性值(用冒号链接)  语法:选择符{   属性1:属性值:   属性2:属性值:  } 所有的CSS语句都要放到 ...

  3. HDU P2089

    题目大意为,统计区间内不含4和62的数字的个数: 老实说,看到这题我是抵触的..... 基本上是数位DP的板子,话说数位DP好像全是模板题吧: 预处理,有关的整区间的数字个数: 调用已有的区间,求解0 ...

  4. Laravel之Ueditor

    1.访问网址http://ueditor.baidu.com/website/download.html下载合适的编辑器版本 2.按照插件包中的index.html样式,布局页面 3.如果需要使用表单 ...

  5. DOM操作表单

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  6. 对一些ArcGIS for JS的API的一些理解

    1.esri/map map类是每个地图控件中必须引入的类,我们可以通过Map()对地图进行许多的操作,比如修改地图的坐标系.显示级别和初始显示范围等等.   Map有一个类型为GraphicsLay ...

  7. js重名的处理

    ### 关于重名的处理 > 在变量提升阶段,如果名字重复了,不会重新的进行声明,但是会重新的进行定义(后面赋的值会把前面赋的值给替换掉) ```javascript //=>变量提升:fn ...

  8. 算法之杨辉三角形(Java语言)

    杨辉三角形, 又称贾宪三角形.帕斯卡三角形. 前9层写出来如下: 1 1 1 1 2 1 1 3 3 1 1 4 6 4 1 1 5 10 10 5 1 1 6 15 20 15 6 1 1 7 21 ...

  9. linux 下通过过 hbase 的Java api 操作hbase

    hbase版本:0.98.5 hadoop版本:1.2.1 使用自带的zk 本文的内容是在集群中创建java项目调用api来操作hbase,主要涉及对hbase的创建表格,删除表格,插入数据,删除数据 ...

  10. 乘风破浪：LeetCode真题_019_Remove Nth Node From End of List

    乘风破浪:LeetCode真题_019_Remove Nth Node From End of List 一.前言 这次总算到了链表的操作了,之后肯定会有排序算法,二叉树,排序树,图等等的操作,现在我 ...