<!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. idea导入mybatis源码

    1.最近在学mybatis,想下载源码导入idea结果网上一查没有一篇完整的,结果让我进了个大坑,算了,废话少说 2.两种办法,一个是git客户端克隆,另外一个是下载code压缩包.先说通过git客户 ...

  2. J2SE 容器

    知识点:Collection接口.Iterator接口.增强的for循环.Set接口.List接口和Comparable接口.Collection类.Map接口.自动打包/解包.泛型 容器:API文档 ...

  3. 性能测试基础---事务&检查点&思考时间&集合点

    性能测试脚本的增强:·参数化·关联·事务·检查点·思考时间·集合点 ·事务:事务的引入是为了度量相关的业务请求的响应时间和吞吐量指标.在LR中,事务是通过两个事务函数来实现的. lr_start_tr ...

  4. Flutter初探与环境搭建

    最近组里有个前端的同事在疯狂学习Flutter,本来上半年就一直想学它,但是..由于个人的原因还有其它的东东想学就一直把它给无限搁置了,为了跟上时代的潮流所以接一来还是下定决定好好将它学一下,毕境如今 ...

  5. 大数据调度工具oozie详细介绍

    背景 之前项目中的sqoop等离线数据迁移job都是利用shell脚本通过crontab进行定时执行,这样实现的话比较简单,但是随着多个job复杂度的提升,无论是协调工作还是任务监控都变得麻烦,我们选 ...

  6. MyBatis框架之入门(三)

    使用原始dao层进行开发 UserMapper层接口 public interface UserMapper { /** * 通过id查询用户 * @param id * @return */ Use ...

  7. GC线程是不是守护线程

    是 线程的话分为守护线程和非守护线程(即用户线程) 只要当前JVM实例中尚存在任何一个非守护线程没有结束,守护线程就全部工作; 只有当最后一个非守护线程结束时,守护线程随着JVM一同结束工作,守护线程 ...

  8. 使用Postman做接口测试

    Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求,将请求数据发送至服务端,获取对应的响应结果, 从而验证响应中的结果数据是否和 ...

  9. Hbase 分页设计

    hbase 数据获取方式 直接根据 rowkey 查找,速度最快 scan,指定 startrowkey.endrowkey 和 limit获取数据,在 rowkey 设计良好的情况下,效率也不错 全 ...

  10. How to Construct the Input Bet String

    The purpose of this section is to describe the format of the string which will submitted to the Pyth ...