用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. shutil的一些基本用法

    import shutil import time import tarfile # 将文件内容拷贝到另一个文件中 shutil.copyfileobj(open('a1', 'r'), open(' ...

  2. JAVASE(说出ArrayList,LinkedList的储存性能和特性)

    说出ArrayList,和LinkedList的储存性能和特性? 答: ##  ArrayList采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,优点是索引读取快,从最后插入和删除元素速 ...

  3. 03.CSS动画-->自定义动画

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. MvcForum中文版+PostgreSql源码下载

    演示地址:http://bbs.hfenxiao.com 因为种处原因在家休假,闲来无事,便将去年关注的一个基于asp.net mvc论坛程序拿出来做了一些调整. 据说PostgreSql是世界上功能 ...

  5. MUI框架-13-使用百度地图 API（图文教程）

    MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...

  6. IEC62304-2006解读

    IEC62304强调医疗软件在明确和满足其预期用途的前提下,不能引发不可接受的风险 62304提供一个医疗软件开发的框架,并指出框架下每个过程的要求,62304将过程分解为若干活动,活动分解为若干任务 ...

  7. spring boot(1)-Hello World

    spring boot简介 spring boot是由spring官方推出的一个新框架,对spring进行了高度封装,是spring未来的发展方向.spring boot功用众多,其中最主要的功能就是 ...

  8. Ionic微信开发之环境配置

    在开发微信版的H5页面时,如果需要正常调用微信公众号的开放接口(测试或者发布情况),根据官方要求需要保证网页域名和后端维护的一致.因此,进行真服测试就显得很有必要.WebStorm提供了实时远程部署的 ...

  9. magento2站点迁移

    当文件与数据库都迁到新服务器上之后 rm -rf ./var/cache/ rm -rf ./var/generation/ rm -rf ./var/log/ rm -rf ./var/maps/ ...

  10. winform中webBrowser模拟网页操作中遇到的问题

    我们通过网页上传一些特殊数据的时候,由于必填项众多,数量量大的时候,会发现工作相当繁琐,前段时间做了一个winform内嵌webBrowser模拟网页上传文档的小工具,发现了许多问题,总结一下: 先说 ...