<!DOCTYPE html>

<html lang="en">

<head>

  <style>

    .span-line-begin {

      background-color: blue;

      position: relative;

      margin-right: 8px;

    }

    .span-line-begin:after {

      content: "";

      position: absolute;

      display: inline-block;

      width: 0;

      height: 0;

      border-top: 10px solid transparent;

      border-left: 10px solid blue;

      border-bottom: 10px solid transparent;

    }

    .span-line-end {

      background-color: blue;

      position: relative;

      margin-left: 8px;

    }

    .span-line-end::after {

      content: "";

      left: -10px;

      position: absolute;

      display: inline-block;

      width: 0;

      height: 0;

      border-top: 10px solid transparent;

      border-right: 10px solid blue;

      border-bottom: 10px solid transparent;

    }

    #triangle_right {

      width: 0;

      height: 0;

      border-top: 70px solid transparent;

      border-left: 140px solid #ff5a00;

      border-bottom: 70px solid transparent;

    }

  </style>

</head>

<body>

  <span>6152</span>

  <span class="span-line-begin">&lt;111&gt;</span>

  <span class="span-line-begin">&lt;222&gt;</span>

  <span>wew</span>

  <span class="span-line-end">&lt;/222&gt;</span>

  <span class="span-line-end">&lt;/111&gt;</span>weqwe

  <div id="triangle_right"></div>

</body>

</html>

【小实现】css after+border实现标签半菱形的更多相关文章

  1. HTML|CSS之HTML常用标签

    知识内容: 1.标签 2.head内标签 3.body内常用标签 注:本人使用的HTML为HTML5 一.标签 1.标签格式 标签的语法: <标签名 属性1=“属性值1” 属性2=“属性值2”… ...

  2. CSS 的 border 样式

    制作过网页的人都有为画线而烦恼的经历,先来认识一下“Border”(画边框),它是CSS的一个属性,用它可以给能确定范围的HTML标记(如TD.DIV等等)画边框,它可以定义边框线的类型.宽度和颜色, ...

  3. 前端基础之CSS的引入+HTML标签选择器+CSS操作属性

    clear:left/ringt属性 CSS:语法形式上由选择器+以及一条或多条声明组成:选择器查找到指定的html标签后,使用css属性设置html标签的样式:                   ...

  4. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  5. CSS之border绘制三角形

    用CSS的border可以画出高质量的三角形. 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px a ...

  6. 通过CSS的border绘制三角形

    通过css的border 可以绘制出三角形, 不同的样式组合,有着不同的效果,可以控制它的大小,颜色,方向.看下面各种图形,相信可能还有很多图形,大家都没见过. 先写出公共的样式: .border { ...

  7. 重温CSS：Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  8. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  9. (转)CSS颜色及<a>标签超链接颜色改变

    CSS颜色大全 <a>标签超链接颜色改变 A:hover   {BACKGROUND-COLOR:   #ffccff;   COLOR:   #0080ff}     (hover表示鼠 ...

随机推荐

  1. C#的静态类

    静态类 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例 ...

  2. Httpd服务入门知识-Httpd服务常见配置案例之设定默认字符集

    Httpd服务入门知识-Httpd服务常见配置案例之设定默认字符集 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.查看生产环境中使用的字符集案例 1>.查看腾讯设置的默认 ...

  3. 上传自己的构件(Jar)到Maven中央仓库

    背景: 用了Maven之后,你有没有这样的想法,自己一直在使用别人贡献的代码,自己能不能把自己觉得好的代码也贡献出来让大家方便. 还有如果你也是一名程序员,你会不会觉得要是把自己积累起来日常常用的代码 ...

  4. 【还是畅通工程 HDU - 1233】【Kruskal模板题】

    Kruskal算法讲解 该部分内容全部摘录自刘汝佳的<算法竞赛入门经典> Kruskal算法的第一步是给所有边按照从小到大的顺序排列. 这一步可以直接使用库函数 qsort或者sort. ...

  5. POJ 3322 Bloxorz

    #include<cstring> #include<algorithm> #include<iostream> #include<cstdio> #i ...

  6. 201671030111 李蓉 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 软件工程 这个作业的要求在哪里 实验十四 团队项目评审&课程学习总结 作业学习目标 掌握软件项目评审会流程,反思总结课程学习内容. 任务一:结合本学期课程学习 ...

  7. 20180520模拟赛T1——math

    [问题描述] 小美有 n 个点 m 条边. 让你给每个点一个正整数编号. 每条边有两个属性,相连的两个点的编号的 GCD 和 LCM. 题目保证整张图连通. 让你构造出一个编号. [输入格式] 从文件 ...

  8. SpringBoot——报错总结

    前言 记录SpringBoot的相关报错信息 错误 无法引入@ResponseBody和@RequestMapping("/") <dependency> <gr ...

  9. 【Postgres】Windows2012 不能启动

    PG启动错误-不知道什么错误 等待 postgresql-x64- 服务的连接超时( 毫秒). 由于下列错误,postgresql-x64- 服务启动失败: 服务没有及时响应启动或控制请求. 编写ba ...

  10. UI系统的作用

    1.向用户展示信息: 2.将用于与系统的交互解释为指令.