CSS实现div梯形分割

原理

  1. 使用的border边框属性
  2. 结合svg 转换

详见代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>css实现div边框斜角</title><style type="text/css">
.labels {display: inline-block;display: inline-flex;color: #fff;line-height: 22px;
}.label {display: inline-block;text-align: center;
}.label.port {background-color: #636F80;width: 48px;
}.label.port::before {border-top: 11px solid transparent;border-right: 5px solid #636F80;border-bottom: 11px solid #636F80;border-left: 5px solid transparent;
}.label + .label {position: relative;z-index: 3;
}.label + .label .triangle {width: 22px;height: 22px;position: absolute;right: 100%;top: 0;margin-right: -8px;
}</style>
</head>
<body><div class="labels"><span class="label" style="background-color:#2c968a; width: 102px;">127.0.0.1</span><span v-if="row.url" class="label port"><svg class="triangle" viewBox="0 0 1024 1024" xmlns:xlink="http://www.w3.org/1999/xlink"><path style="fill: #636F80;" d="M679.563636 2.771938h7.345635l-7.345635 1021.228062H336.443943z" /></svg>8080</span>
</div>
</body>
</html>

效果如下：

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/249105.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

算法学习——决策单调性优化DP

算法学习——决策单调性优化DP

update in 2019.1.21 优化了一下文中年代久远的代码 的格式…… 什么是决策单调性&#xff1f; 在满足决策单调性的情况下&#xff0c;通常决策点会形如1111112222224444445555588888..... 即不可能会出现后面点的决策点小于前面点的决策点这种情况。 那么这个性质应该如何使用…
阅读更多...
SVG画一个箭头

SVG画一个箭头

参考菜鸟手册&#xff1a; https://www.runoob.com/svg/svg-tutorial.html 打开菜鸟中的在线工具 在可视化截图拖拉元素绘制箭头 点击command U 查看源码 将源码拷入html代码中&#xff0c;查看效果 最后&#xff0c;贴出源码供大家参考 <!DOCTYPE html> <…
阅读更多...
HP Instant Information

HP Instant Information

HP Instant Information before HP-UX 11i v3 《管理系统和工作组&#xff1a;HP-UX系统管理员指南》 After HP-UX 11i v3 《HP-UX系统管理指南》(由多个文档组成的文档集) 《HP-UX系统管理员指南&#xff1a;概述》 《HP-UX系统管理员指南&#xff1a;配置管理》 《HP-UX系统管…
阅读更多...
CodeForces 258D Little Elephant and Broken Sorting(期望)

CodeForces 258D Little Elephant and Broken Sorting(期望)

CF258D Little Elephant and Broken Sorting 题意 题意翻译 有一个\(1\sim n\)的排列&#xff0c;会进行\(m\)次操作&#xff0c;操作为交换\(a,b\)。每次操作都有\(50\%\)的概率进行。 求进行\(m\)次操作以后的期望逆序对个数。 \(n,m\le 1000\) 输入输出格式 输入格式&#x…
阅读更多...
记一次vue项目yarn打包环境配置失效的解决方案

记一次vue项目yarn打包环境配置失效的解决方案

项目中使用到了yarn打包工程&#xff0c;主要有以下几个命名。 # build for production with minification yarn run build# build for production and view the bundle analyzer report yarn run build --report# 自定义API地址 baseurl"http://127.0.0.1:8080/api/&quo…
阅读更多...
数字签名与HTTPS详解

数字签名与HTTPS详解

因为HTTP协议本身存在着明文传输、不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点&#xff0c;所以才有了HTTPS的缺陷。HTTPS确切的的说不是一种协议&#xff0c;而是HTTP SSL (TSL)的结合体。HTTP报文经过SSL层加密后交付给TCP层进行传输。SSL(安全套…
阅读更多...
[BZOJ4320][ShangHai2006]Homework(根号分治+并查集)

[BZOJ4320][ShangHai2006]Homework(根号分治+并查集)

对于<sqrt(300000)的询问&#xff0c;对每个模数直接记录结果&#xff0c;每次加入新数时暴力更新每个模数的结果。 对于>sqrt(300000)的询问&#xff0c;枚举倍数&#xff0c;每次查询大于等于这个倍数的最小数是多少&#xff0c;这个操作通过将询问逆序使用并查集支持。…
阅读更多...
VScode 结局插件prettier和vetur格式化冲突

VScode 结局插件prettier和vetur格式化冲突

先上配置代码 {"workbench.iconTheme": "vscode-icons","workbench.startupEditor": "newUntitledFile","workbench.colorTheme": "One Dark Pro","editor.fontSize": 14,"editor.tabSize":…
阅读更多...
WPF效果（GIS三维续篇）

WPF效果（GIS三维续篇）

去年这个时候简单的摸索了一下三维的GIS相关的东西,也就是仅仅玩耍了一把,这次来点真正用的上的干货效果效果&#xff1a; 1、加载自定义百度样式的瓦片效果 2、加载自定义百度样式的缩放效果 3、快速手动进去咱的大帝都 4、加载海量Mark效果 5、加载海量Mark和简单模型效果 6、…
阅读更多...
vue 表单 验证 async-validator

vue 表单 验证 async-validator

1、使用插件async-validator async-validator 地址&#xff1a;https://github.com/yiminghe/async-validator 2、示例&#xff08;vueelement-ui&#xff09; <el-form :model"numberValidateForm" ref"numberValidateForm" label-width"100px&qu…
阅读更多...
[19/04/23-星期二] GOF23_创建型模式(工厂模式、抽象工厂模式)

[19/04/23-星期二] GOF23_创建型模式(工厂模式、抽象工厂模式)

一、工厂模式(分为&#xff1a;简单工厂模式、工厂方法模式、抽象工厂模式) 实现了创建者和调用者的分离 核心本质&#xff1a;1、实例化对象&#xff0c;用工厂方法代替new操作&#xff1b;2、将选择实现类、创建对象统一管理和控制&#xff0c;从而将调用者跟实现类解耦。 简…
阅读更多...
Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案

Chrome浏览器12px问题-webkit-text-size-adjust: none 已失效的解决方案

对于早期的chrome, 如果要想显示12px以下的字体&#xff0c;一般通用的方案都是在对应的元素中添加 div {-webkit-text-size-adjust: none; }但是我今天遇到的需求&#xff0c;添加了之后没有反应&#xff0c;而且浏览就根本不支持这种写法。 在网上看到了博客《Chrome浏览器…
阅读更多...
CSRFGuard工具介绍

CSRFGuard工具介绍

理解CSRFGuard的基础&#xff1a;http://www.runoob.com/jsp/jsp-tutorial.html 1&#xff1a;您需要做的第一件事是将OWASP.CSRFARGAD.JAR库复制到类路径中。放置Owasp.CsrfGuard.jar最常见的类路径位置在Web应用程序的WEB-INF文件夹的lib目录中。 OWASP CSRFGARD 3在传统Java…
阅读更多...
[19/04/24-星期三] GOF23_创建型模式(建造者模式、原型模式)

[19/04/24-星期三] GOF23_创建型模式(建造者模式、原型模式)

一、建造者模式 本质&#xff1a;分离了对象子组件的单独构造(由Builder负责)和装配的分离(由Director负责)&#xff0c;从而可以构建出复杂的对象&#xff0c;这个模式适用于&#xff1a;某个对象的构建过程十分复杂 好处&#xff1a;由于构建和装配的解耦&#xff0c;不同的构…
阅读更多...
深入理解vue中的slot与slot-scope

深入理解vue中的slot与slot-scope

写在前面 vue中关于插槽的文档说明很短&#xff0c;语言又写的很凝练&#xff0c;再加上其和methods&#xff0c;data&#xff0c;computed等常用选项在使用频率、使用先后上的差别&#xff0c;这就有可能造成初次接触插槽的开发者容易产生“算了吧&#xff0c;回头再学&#…
阅读更多...
js 转义

js 转义

1. JavaScript 特殊字符 2. 正反斜杠互相替换 a/b/c.replace(/\//g,\\) // "a\b\c" $0.value.replace(/\\/g,\/) // a/b/c 获取到 而不提取出 某个值后进行直接处理 \ 有转义功能&#xff0c;所以一旦解析必然转义&#xff0c;通常是直接获取到数据源…
阅读更多...
关于Java抽象类，接口与实现接口及派生类继承基类

关于Java抽象类，接口与实现接口及派生类继承基类

1. 抽象类 抽象类就是有一个或多个方法只被声明而未被实现。 抽象方法的声明以分号结束&#xff0c;并且用关键字abstract来说明它以标识它为抽象方法。 格式&#xff1a; public abstract class 类名{ 定义变量// 抽象方法// } 2. 接口是抽象类的一种&#xff0c;之包含常量…
阅读更多...
ie兼容响应式布局的实现总结

ie兼容响应式布局的实现总结

虽然说响应式设计的理想状态是&#xff0c;需对pc/移动各种终端进行响应&#xff1b;但是现实是高分辨率的pc端与手机终端屏幕相差太大&#xff0c;像电商这样有大量图片和文字 信息的同时排版要求精准的页面&#xff0c;设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑…
阅读更多...
Luogu P1471 方差

Luogu P1471 方差

题目传送门 开了十倍空间才过是什么鬼&#xff1f;该不会我线段树炸了吧……细思极恐 平均数都会求&#xff0c;维护区间和&#xff0c;到时候除一下就好了。 方差的求法如下(用的Luogu的图片) 因为要维护一个平方&#xff0c;我们可以考虑使用van♂完全平方公式将它拆开&#…
阅读更多...
python学习day17 递归函数

python学习day17 递归函数

递归函数 http://www.cnblogs.com/Eva-J/articles/7205734.html def age(n):if n 4:return 40elif n >0 and n < 4:return age(n1) 2print(age(1)) # 46 只要写递归函数&#xff0c;必须要有结束条件。 二分法查找 l [2,3,5,10,15,16,18,22,26,30,32,35,41,42,43,55,5…
阅读更多...
最新文章

Copyright @ 2022~2023