(转载) css实现小三角(尖角)

news/2024/5/18 4:42:36

在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博)

尖角示例 

它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫尖角吧,通俗易懂。我查看了各大互联网公司的网站,包括腾讯、百度、新浪、天猫、去哪网, 

腾讯:

腾讯尖角示例 

百度:

百度尖角示例 

去哪网:

去哪网尖角示例 

天猫:

天猫尖角示例

 

其中,百度和腾讯直接用的背景图片,简单粗暴,没有艺术细菌。

优点:形状随意;

缺点:不方便维护;

 

下面要说的是新浪微博,右键小尖角,查看元素,可以看到一段代码:

<div class="WB_arrow"><em class="S_line1_c">◆</em><span class="S_bg1_c">◆</span></div>

可以发现,新浪是利用◆文字图标,颜色与背景色一致,外层边框同理,两个◆叠起来留,一上一下留出一个像素就算是边框了,很巧妙。为了便于理解,我把这两块◆改成便于区分的颜色,如下图:

新浪微博尖角示例

蓝色块刚好把红色块”下半身“遮住了。如果不太明白,请直接移步新浪微博查看源码。

优点:大小颜色随意、方便维护;

缺点:形状固定;

 

让人欣慰的是天猫和去哪网的做法,完全代码实现。以天猫为例:

html部分:

<i class="market-nav-arrow"></i>

css部分:

height: 0;
font-size: 0;
line-height: 0;
border-style: solid;
border-width: 7px 7px 7px 0;
border-color: transparent #f3f3f3;

利用css边框来模拟尖角,最重要的一句是

border-color: transparent #f3f3f3;

上下边框透明,左右设定尖角需要的颜色,而左边框的大小为0,剩下一个大小为7px的右边框,就构成了上图天猫中的尖角,让我把右边框大小设为7px,结果就这个样子:

border-width: 7px 7px 7px 7px;

天猫尖角示例

左右两个尖角,如果需要向右的尖角,只需要把右边框大小设置为0px即可:

border-width: 7px 0px 7px 7px;

天猫尖角示例

上下尖角同理,去哪网也是这么干的,个人比较喜欢这种方式。

优点:大小、颜色随意,方便维护;

缺点:形状单一

 

又凌晨半点了,该洗洗睡了,以后看到好的做法再来补充~

补充:如果不考虑IE6和7,最好的方式是利用伪类实现尖角效果:

复制代码
<style>
.WB_arrow{width: 200px; height: 200px; border: 2px solid blue; position: relative; margin: 100px auto;}
.WB_arrow:before,.WB_arrow:after{ content: ""; width: 0; height: 0; position: absolute;display: block; border-width: 20px; border-style: solid;  }
.WB_arrow:before{right: -40px; top: 40px; border-color: transparent transparent transparent blue;}
.WB_arrow:after{right: -38px; top: 40px; border-color: transparent transparent transparent white;}</style><div class="WB_arrow"></div>
复制代码

效果:

优点:大小、颜色随意,方便维护,减少不必要的代码;

缺点:不兼容IE6/7

 

本文转载自:http://www.cnblogs.com/wangmeijian/p/3958928.html

转载于:https://www.cnblogs.com/imsomnus/p/4845916.html


https://dhexx.cn/news/show-16897.html

相关文章

pdf python 合同_是程序员,就用python导出pdf

这两天一直在做课件&#xff0c;我个人一直不太喜欢PPT这个东西……能不用就不用&#xff0c;我个人特别崇尚极简风。谁让我们是程序员呢&#xff0c;所以就爱上了Jupyter写课件&#xff0c;讲道理markdown也是个非常不错的写书格式啊。安装Jupyter其实非常简单&#xff0c;你会…

wordpress建站流程_国内类似WordPress的建站系统

事实上&#xff0c;外贸企业早已开始通过外贸独立网站的方式进行交易&#xff0c;毕竟拥有自己的网站&#xff0c;就有了企业品牌及网络营销的主阵地。据了解但凡初具规模的公司一般都有自己的网站&#xff0c;在展示企业产品的同时&#xff0c;网站还能为他们带来以下优势&…

php和mysql处理树状_分级_无限分类_分层数据的方法_PHP和MySQL处理树状、分级、无限分类、分层数据的方法...

文章标题中的多个词语表达的其实是一个意思&#xff0c;就是递归分类数据&#xff0c;分级数据非常类似数据结构中的树状结构&#xff0c;即每个节点有自己的孩子节点&#xff0c;孩子结点本身也是父亲节点。这是一个递归、分层形式。可以称之为树形层级数据。层级数据结构是编…

PS长图快速切片_PS最常用的100多个快捷键

PS最常用的100多个快捷键这些快捷键都是比较常用的&#xff0c;一些比较生僻的快捷键我就不发出来了。这些快捷键大家可以抄下来&#xff0c;但是&#xff0c;完全没有必要刻意的想去记住它&#xff0c;因为你越是想刻意的记住它&#xff0c;越是记不住。下面这一百多个快捷键全…

UVa 294 (因数的个数) Divisors

题意&#xff1a; 求区间[L, U]的正因数的个数。 分析&#xff1a; 有这样一条公式&#xff0c;将n分解为&#xff0c;则n的正因数的个数为 事先打好素数表&#xff0c;按照上面的公式统计出最大值即可。 1 #include <cstdio>2 #include <cmath>3 4 const int maxn…

uft自动化测试工具安装步骤_2020年十大最佳自动化测试工具

Best Automation Testing Tools for 2020对更快交付高质量软件(或"快速质量")的需求要求组织以敏捷&#xff0c;持续集成(CI)和DevOps方法论来寻找解决方案。测试自动化是这些方面的重要组成部分。最新的《 2018-2019年世界质量报告》表明&#xff0c;测试自动化是实…

hive 取消打印日志信息_Hive为什么这么受欢迎?来看Hive架构以及应用介绍

Hive究竟是什么&#xff0c;为什么在Hadoop家族中占有这么重要的地位&#xff0c;本篇文章将围绕Hive的体系结构(架构)、Hive的操作、Hive与Hbase的区别等对Hive进行全方面的阐述。作者&#xff1a;Python工程师Hive这个框架在Hadoop的生态体系结构中占有及其重要的地位&#x…

【百度地图API】如何批量转换为百度经纬度

【百度地图API】如何批量转换为百度经纬度 原文:【百度地图API】如何批量转换为百度经纬度摘要&#xff1a; 百度地图API的官网上提供了常用坐标转换的示例。但是&#xff0c;一次只能转换一个&#xff0c;真的非常麻烦&#xff01;&#xff01;这里结合了官方的示例&#xff0…

getprocaddress得到为0_TensorFlow从0到1 - 15 - 重新思考神经网络初始化

上一篇14 交叉熵损失函数——克服学习缓慢从最优化算法层面入手&#xff0c;将二次的均方误差&#xff08;MSE&#xff09;更换为交叉熵作为损失函数&#xff0c;避免了当出现“严重错误”时导致的学习缓慢。本篇引入1/sqrt(nin)权重初始化方法&#xff0c;从另一个层面——参数…

类的组合在什么情况下使用_什么情况下使用切片防草布?切片防草布都有什么规格呢...

防草布(园艺地布)是整卷的布状物&#xff0c;通常幅宽为0.5--2米&#xff0c;卷长为100米--800米&#xff0c;在使用时只需要将防草布展开平铺即可。但是有些情况之下不适合使用整卷的防草布&#xff0c;而人工裁剪费时费力对原材料(防草布)还有很大的损耗&#xff0c;自己剪裁…