CSS快速入门-箭头和图标
一、三步搞懂箭头产生的原理
在前面的盒子模型一文中,我们已经知道了一个元素空间占位。为了弄明白箭头的产生,我们可以三步走:
#demo12 {border: 100px solid;border-color:green blue orange red;width:100px;height:100px;}<div id="demo12"></div>
第一步:设置一个div,然后给他设置样式:边框100px,上右下左颜色分别为绿、蓝、橘、红。然后设置div的高度和长度均为100。
效果图如下:
第二步:我们可以看到中间一个正方形,就是我们设置的长和框:100px*100px。假如把width和height都设置成0的话,会有什么样的情景呢?
content拿掉后,其实就是变成一个点了,然后就变成下图了:
第三步:三角形是不是有了?而且还有四个,这时我们只需要取其中想要的任意一个方向的三角形即可。比如我们要取绿色的三角形。看好了,一句话就出来了:
将上面的代码修改一行代码:
border-color:green transparent transparent transparent;
同理,如果你要取蓝色的、橘色的、红色的,随便可以取到。
除了获取上面三角形以外,我们还可以获取上面每个三角形的一般,也就是一个小的三角形(left或right):
这时,我们再加一行代码即可获取:
#demo12 {border: 100px solid;border-color:green transparent transparent transparent; border-left:transparent;width:0px;height:0px;}
加上border-left:transparent;后,我们可以获取right的部分,结果如下:
同理,要获取left部分,可以设置border-right:transparent;
二、箭头在实际中的使用和实现
在很多网站上,我们随处可以见到箭头。
比如淘宝网:
实例1:
这个比较简单,就是一个向右的箭头,我们将top、right、bottom均设置为透明色即可获得。
#demo12 {border: 10px solid;border-color:transparent transparent transparent orange;width:0px;height:0px;}
实例2:
这个也非常简单,我们从上面的四个三角形中,把bottom的三角形去掉即可,也就是把bottom的三角形设置为透明色:
#demo12 {border: 50px solid;border-color:orange orange transparent orange;width:0px;height:0px;}
实例3:
这个比较明显,就是两个向右的三角形叠加而成。
思路如下:
设置2个div,其中一个相对定位,另外一个绝对定位,这样就可以控制两个div的位置了。
然后获取2个div的右向箭头即可。talk is cheap,show me the code!
.demo{border: 50px solid;border-color:transparent transparent transparent orange;width:0px;height:0px;}.demo12 {position:relative;float:left;}.demo13 {position:absoulte;margin-top:-52px;}<div class="demo demo12"><div class="demo demo13"></div></div>
效果图如下:
实例4:
这个例子的实现通过一个正方形+一个三角形就可以了。
#demo1 { #设置一个长方形,且为相对定位,为后续附加在它身上的三角形准备width: 100px;height: 40px;background-color: orange;position: relative;border: 4px solid #333;left:30px;line-height:40px;}#设置整体样式#demo1:after, #demo1:before {border: solid transparent;content: ' ';height: 0;right: 100%;position: absolute;width: 0;}#在长方形的右边形成一个橘色的三角形(这里主要用于覆盖黑色的三角形,起到填充的作用)#demo1:after {border-width: 9px;border-right-color: orange;top: 15px;}#在长方形的右边形成一个黑色的三角形(这里主要要用他的黑色边框) #demo1:before {border-width: 14px;border-right-color: #333;top: 10px;}<div id="demo1">我是箭头测试</div>
效果图如下:
转载于:https://www.cnblogs.com/skyflask/p/8877713.html
CSS快速入门-箭头和图标相关推荐
- 前端学习之CSS快速入门-2021-09-20~22
CSS快速入门 什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型 浮动 定位 网页动画(特效效果) ...
- css 快速入门之 flex 布局教程
css 快速入门之 flex 布局教程 flex 简称弹性布局,是2009年W3C提出的 css3 新属性. 弹性布局(flexible box)模块旨在提供一个更加有效的方式来布置,对齐和分布在容器 ...
- HTML/CSS快速入门
Web概念 JavaWeb 使用java语言开发基于互联网的项目 软件架构 C/S架构:Client/Server 客户端/服务器 用户本地有一个客户端程序,在远程有一个服务端程序 如QQ,英雄联盟. ...
- Html与CSS快速入门01-基础概念
Web前端技术一直是自己的薄弱环节,经常为了调节一个简单的样式花费大量的时间.最近趁着在做前端部分的开发,果断把这部分知识成体系的恶补一下.内容相对都比较简单,很类似工具手册的学习,但目标是熟练掌握. ...
- css html 抽屉,CSS快速入门-前端布局1(抽屉)(示例代码)
一.效果图 前面对CSS基础知识有了一定的了解,是时候开始实战了!以下我对抽屉(https://dig.chouti.com/)主页进行模拟布局. 官方网站效果图: 模拟网站图: 二.实现步骤 1.整 ...
- flex.css快速入门,极速布局
什么是flex.css? css3 flex 布局相信很多人已经听说过甚至已经在开发中使用过它,但是我想我们都会有一个共同的经历,面对它的各种版本,各种坑,傻傻的分不清楚,flex.css就是对fle ...
- css_01_承接部分html+css快速入门
文章目录 HTML标签:表单标签 CSS:页面美化和布局控制 概念 css与html结合 选择器-基础选择器 选择器-扩展选择器 属性 案例: 1. HTML标签:表单标签2. CSS: HTML标签 ...
- web前端之css快速入门
css:又称层叠样式表 具体英文单词(好吧,我又不是学英文) w3c,中文也称之为万维网.网页地址:http://www.w3school.com.cn/ 里面包最详细的教程,但是前提你愿意花费那么多 ...
- 0x02 CSS快速入门
前言:CSS内容较杂,建议只看前五节,对CSS有一定的认识:后面需要用到对应的样式再去检索:另,本篇文章涉及的知识肯定不全,毕竟这块知识太杂了,后续应该会更新 文章目录 一.CSS简介 1.概述 2. ...
最新文章
- 360金融翟政:科技成就金融场景零容错
- 为什么AI的翻译水平还远不能和人类相比?
- 计算机基础及msoffice应用书本,全国计算机等级考试一本通一级计算机基础及MSOffice应用2016年无纸化考试专用...
- 机器学习(二十九)——Temporal-Difference Learning
- sqlyog能连接oracle吗_真的能改变传统投影吗?支持各种无线连接,投影老巨头明基放大招...
- docker mysql关掉后启动_Docker启动mysql的坑2
- React Native - 3 View, Text简介以及onPress onLongPress事件
- python中安装使用模块_python 安装模块
- java restclient 调用_restclient 访问 springmvc java工程接口
- Atiit 常见功能 常用功能与模块的最快速解决方案
- 微信 小程序 python 渲染_两小时快速构建微信小程序
- 当你发现自己U盘里文件夹有了“.exe”后缀该怎么办
- 银行网站 ca服务器的安装,建行网银CA认证系统建设案例介绍
- [转载]VBA创建数据透视表
- 有着奋斗比之都之称的杭州,现在还适不适合年轻人奋斗?
- 一文讲解,Linux内核——Memory Barrier(内存屏障)
- Winmail安装及服务启动失败问题
- 音视频开发---M3U8 https://www.jianshu.com/p/e97f6555a070
- 计算机组装的品牌价格,相同配置的品牌电脑和组装电脑价格相差多少
- mysql--MGR