<!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. jieba分词及词频统计小项目

    import pandas as pd import jieba import jieba.analyse from collections import Counter,OrderedDict ji ...

  2. SpringBoot + Nginx 配置HTTPS的一次经历

    最近公司开发了一款小程序的应用,但是小程序为了保证数据安全,强制要求使用HTTPS,然后就不得不去配置了一下. 之前在php开发的项目上配置过一次,使用的是wdcp的控制台程序,配置起来很简单,不需要 ...

  3. 【异常】微博生成短链异常{"request":"/2/short_url/shorten.json","error_code":"10014","error":"Insufficient app permissions!"}

    一.之前的调用方式 这种方式用了大约有一年时间,之前没有问题,但是2019-8-28号突然不行了,可能是由于微博对该接口的调用做了限制.不允许通过传递source参数的方式进行请求 该接口微博API文 ...

  4. zabbix--告警消息内容更改

    zabbix 告警消息内容更改 自带的消息内容模板发送出来的消息着实有点丑陋,再加之是英文,这就让我有点尴尬了. 如下默认的消息内容: 更改过后的效果: 操作步骤 编辑默认的Report proble ...

  5. php中的Exception

    如果定制的EXCEPTION搞定了,默认的,就自然不在话下罗. 直接上最曲折的过程. InvalidIdException.php <?php namespace Bookstore\Excep ...

  6. maven:读取程序版本号的三种方案

    方案1在应用项目中,如果应用程序需要获取当前程序的版本号,可以读取”/META-INF/maven/${groupId}/${artifactId}/pom.properties“,获取maven生成 ...

  7. js--同步运动json上

    如何实现几个属性的同时变化?这个问题需要运用到json,这里我们先来简要的介绍一下json json的形式是这样的,他的元素是有一对对的键值对组成的{name1:value1,name2:value2 ...

  8. Object类.时间日期类.System类.Stringbuilder类.包装类

    Object类 java.lang.Object类是java语言中的根类,即所有类的父类.它中描述的所有方法都可以使用.在对象实例化的时候,最终找的父类就是Object. 如果一个类没有特别指定父类, ...

  9. RPC笔记搬迁

      选择dubbo 启动原理 解析服务 暴露服务 引用服务 提供服务流程 结合Netty 对比 HSF   https://www.cnblogs.com/lichengwei/p/5529492.h ...

  10. PHP引用（&）

    引用是什么 在 PHP 中引用意味着用不同的名字访问同一个变量内容.这并不像 C 的指针:例如你不能对他们做指针运算,他们并不是实际的内存地址.替代的是,引用是符号表别名.注意在PHP 中,变量名和变 ...