css 实现一个尖角_(转载) css实现小三角（尖角）

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

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

腾讯:

百度：

去哪网：

天猫：

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

优点：形状随意；

缺点：不方便维护；

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

◆◆

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

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

优点：大小颜色随意、方便维护；

缺点：形状固定；

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

html部分：

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，最好的方式是利用伪类实现尖角效果：

.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;}

效果：

优点：大小、颜色随意，方便维护，减少不必要的代码；

缺点：不兼容IE6/7

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

css 实现一个尖角_(转载) css实现小三角（尖角）相关推荐

怎么用css画一个心形_如何用CSS创建心形
CSS3增强了我们仅使用HTML和CSS就能在网站上构建内容的可行性. 您可以找到我们以前精选的出色示例 . 但是,不要让自己过分领先,复杂的设计将需要可能使您头疼的代码. 取而代之的是,我们将创建一 ...
css颜色rgba代码对照表_改善 CSS 的 10 个最佳实践
戳蓝字「前端技术优选」关注我们哦! CSS 看起来是一种非常直接且不易犯错的语言.只需要添加规则以对网站进行样式设置就可以了,对吗?对于只需要几个 CSS 文件的小型站点,可能是这种情况.但是在 ...
css菜单下拉菜单_在CSS中创建下拉菜单
css菜单下拉菜单 CSS | 创建下拉菜单 (CSS | Creating Dropdown) Trivia: 琐事: We know the importance of navigation ba ...
5种css隐藏元素的方法_在CSS中隐藏元素的10种方法
5种css隐藏元素的方法 There are multiple ways to hide an element in CSS, but they differ in the way they affe ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
一个div压在另一个div上面_【CSS小分享】用CSS画一个新拟态风格键盘
什么是新拟态新拟态的英文名称是"Neumorphism",也有人称为"Soft UI". 简单讲,新拟态是一种图形样式,其原理是通过模拟真实物体来为界面的UI ...
asp.net 网页做一个浮动层_【CSS】7 页面布局：浮动
传统网页的3种布局方式: 普通流(标准流):标签按规定好的默认方式排列浮动定位 1.为什么需要浮动浮动:很多网页布局标准流不能实现的,可以用浮动来做,因为浮动可以改变元素标签的默认排列方式i. ...
css复选框样式_使用CSS样式复选框
css复选框样式 Introduction: 介绍: Sometimes we want to develop a website or web page that would contain a f ...
css 隐藏元素显示元素_使用CSS打印时如何隐藏元素？
css 隐藏元素显示元素 Introduction: 介绍: We have come across many challenges while developing a website or we ...
css span 右端对齐_使用 CSS 实现具有方面感知的幽灵按钮
Ghost Buttons:幽灵按钮是指具备基本的按钮形状的透明按钮,有细实线的边框.在悬停时背景填充颜色以突出按钮. direction aware:方向感知这里主要说的是能够判断鼠标是从按钮哪个方 ...

css 实现一个尖角_(转载) css实现小三角（尖角）

css 实现一个尖角_(转载) css实现小三角（尖角）相关推荐

最新文章

热门文章