css实现三角形相关
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实现三角形相关的更多相关文章
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
- 【面试技巧】老生常谈之 n 种使用 CSS 实现三角形的技巧
在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法. 而 CSS 发展到今天,其实有很多有意思的仅仅使用 C ...
- CSS制作三角形和按钮
CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中, ...
- CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单,下面一步步解析. 1.html代码如下 <div class="triangle"> </div> 2.CSS代码 .t ...
- CSS实现三角形
突然想起搞一把三角形. 简单来说: 建一个div 宽度.高度设为0 添加两个样式: border 和 border-color 如果需要一个三角形把其他边框都设为透明 transparent < ...
- css绘制三角形原理
1.新建一个元素,将它的宽高都设置为0:然后通过设置border属性来实现三角形效果,下面是css绘制三角形的原理: <!DOCTYPE html> <html> <he ...
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 经典CSS实现三角形图标原理解析
前言: 在写这篇文章之前,我也看过很多前端大神写的代码,But,都只是粘贴代码和给出显示效果,对于初学者来说大家都喜欢刨根问底,为什么要这样做呢? 接下来就让我给大家分享一下我对CSS实现三角形的理解 ...
随机推荐
- Java对象模型规约
下面是我根据工作中项目的经验,总结的一套自己觉得比较方便的对象模型规约 model(实体模型) -vo(与前端交互的对象模型,前端泛指页面.移动端和远程服务调用等) ...
- html基础技巧:点击、placeholder、文本、字体、清楚浮动
点击处理: 消除a标签点击后的边框,颜色(background:#fff) 1:a:focus{outline:none;} button去除边框 1:border:none 2:border:0px ...
- systemd: Started Session 305 of user root.
方法1: echo 'if ($programname == "systemd-logind" or $programname == "systemd") an ...
- git操作笔记《二》:github更新缓慢问题的解决办法
从GitHub上拉取代码速度十分之慢,百度了一下,说是github的某些域名的dns解析被污染了. 解决方法: 方案一:可以花钱购买VPN服务,但是这对于学生党来说是不划算的. vpn 方案二:绕过d ...
- 美团小程序框架mpvue蹲坑指南
美团小程序框架mpvue(花名:没朋友)蹲坑指南 第一次接触小程序大概是17年初,当时小程序刚刚内侧,当时就被各种限制折腾的死去活来的,单向绑定, 没有promise,请求数限制,包大小限制,各种反人 ...
- 基于Anaconda安装tensorflow-GPU和caffe-GPU
1.创建虚拟环境 我们先创建一个用于caffe和tensorflow共存的虚拟环境,安装完成后激活环境. conda create -n caffe_tf_36 python=3.6 source a ...
- Jenkins 快速上手指南
步骤: 在服务器上安装好jenkins. 在浏览器地址栏输入:服务器地址+":8080/jenkins",回车访问jenkins主页. 单击“新建”,创建任务.如下图: 为任务命名 ...
- AGC016D - XOR Replace 置换/轮换
目录 题目链接 题解 代码 题目链接 AGC016D - XOR Replace 题解 可以发现一次操作相当于一次置换 对于每个a上的位置映射到b对应 可以找到置换群中的 所有轮换 一个k个元素的轮换 ...
- Python requests--初识接口自动化
requests模块初级宝典:http://docs.python-requests.org/zh_CN/latest/user/quickstart.htmlrequests模块之葵花宝典:http ...
- java线程系列之三(线程协作)
本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/7433673,转载请注明. 上一篇讲述了线程的互斥(同步),但是在很多情况 ...