1.css样式面包屑导航条实现矩形和三角箭头拼接
.cssTest {
font-family: PingFangSC-Regular;
font-size: 16px;
color: #333333;
line-height: 40px;
/* 左侧部分 */
.cssTest1 {
width: 750px;
height: 40px;
background-color: #D3D8DF;
position: relative;
display: inline-block;
}
.cssTest1:after {
content: '';
width: 0px;
height: 0px;
border-top: 20px solid rgba(255, 255, 255, 0);
border-right: 20px solid rgba(255, 255, 255, 0);
border-bottom: 20px solid rgba(255, 255, 255, 0);
border-left: 20px solid #D3D8DF;
left: 750px;
position: absolute;
z-index:;
}
.cssTest2 {
width: 750px;
height: 40px;
background-color: #87AAD2;
position: relative;
display: inline-block;
left: 50px;
}
.cssTest2:before {
content: '';
width: 0px;
height: 0px;
border-top: 20px solid #87AAD2;
;
border-right: 20px solid #87AAD2;
;
border-bottom: 20px solid #87AAD2;
;
border-left: 20px solid rgba(255, 255, 255, 0);
position: absolute;
right: 750px;
}
} 2.画三角形的右上部分
<div class="example-content-image-status status-mutual"></div>
.example-content-image-status {
z-index:;
width:;
height:;
position: absolute;
border-bottom: 1.875rem solid rgba(255, 255, 255, 0);
border-left: 3.125rem solid rgba(255, 255, 255, 0);
border-top: 1.875rem solid rgba(255, 255, 255, 0);
border-right: 3.125rem solid rgba(255, 255, 255, 0);
right:;
}
.status-mutual {
border-top: 1.875rem solid #919191;
border-right: 3.125rem solid #919191;
}

css实现三角形相关的更多相关文章

  1. CSS 魔法系列:纯 CSS 绘制三角形(各种角度)

    我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...

  2. 纯css画三角形

    纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...

  3. 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧

    在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...

  4. CSS制作三角形和按钮

    CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...

  5. CSS 制作三角形原理剖析

    使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...

  6. CSS实现三角形

    突然想起搞一把三角形. 简单来说: 建一个div  宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...

  7. css绘制三角形原理

    1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...

  8. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  9. 经典CSS实现三角形图标原理解析

    前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...

随机推荐

  1. oAuth2授权协议 & 微信授权登陆和绑定 & 多环境共用一个微信开发平台回调设置

    OAuth2(open Auth)开放授权协议 授权码模式流程: 1.浏览器(客户端)点击一个比如使用微信登陆按钮 2.会跳到认证服务器页面,让用户选择是否授权 3.如果用户点击授权,那么会跳转到开始 ...

  2. pl/sql学习(5): 触发器trigger/事务和锁

    (一)触发器简单介绍 触发器是由数据库的特定时间来触发的, 特定事件主要包括以下几种类型: (1)DML: insert, update,delete 增删改 (2)DDL: create, alte ...

  3. cf55D 数位dp记忆化搜索+状态离散

    /* 漂亮数定义:可以整除任意数位上的数 求出区间[l,r]之间的漂亮数个数 因为 dp[i][j][k]:i位前模lcm的值是j,i位前lcm是k的漂亮数个数 */ #include<bits ...

  4. 著名的3像素Bug(div+img,多出几像素)

    <div><img src="...."></div> 给img的css设置display: block;/*用来去除div下边莫名多出来的3p ...

  5. Golang 新手可能会踩的 50 个坑【转】

    译文:https://github.com/wuYin/blog/blob/master/50-shades-of-golang-traps-gotchas-mistakes.md 原文:50 Sha ...

  6. [原创]iFPGA-Cable FT2232H JTAG & UART调试器

    iFPGA-Cable FT2232H JTAG & UART调试器 [特性] 采用FT2232H,双通道接口: 支持UART: 支持JTAG,Digilent SMT-1,TCK最大时钟频率 ...

  7. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...

  8. windows server 简化设置

    win2012任务管理器显示磁盘管理员运行命令提示符,diskperf -y 不要开机密码 运行 netplwiz 勾去掉 运行 gpedit.msc 计算机设置-Windows设置 -安全设置-帐户 ...

  9. MariaDB配置、集群

    MariaDB在centos 7.3的安装,配置和集群搭配 阿里云最新选配系统中,只有centos7.3可选,因此,基于centos 7的MariaDB的安装,配置... 全部删除MySQL/Mari ...

  10. commanderJs编写命令行工具(cli)

    前言: 最近需要做一个内部的node cli来独立构建流程,对整个命令行工具实现流程有了大致了解,下面来解释一下如何实现一个cli,和如何使用 commander 库.   新手误区: 在开始实现之前 ...