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

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

腾讯:

百度:

去哪网:

天猫:

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

优点:形状随意;

缺点:不方便维护;

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

<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:; height:; 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

css细节:尖角处理的更多相关文章

  1. 百度前端笔试题目--css 实现一个带尖角的正方形

    今天在牛客网上看到这道题,发现自己并不会,看来自己css都没怎么学习,也不怎么会用.看了下答案,不是很明白,也在网上搜集了一些资料和解法,感觉一些同学博客上也写了一些解法和拓展,所以就在这里借鉴一下咯 ...

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

    在各种网站里面,我们会经常看到类似于这样的尖角:(示例:新浪微博) 它实现的方式有多种,哪种才是最简单的?哪种才是最优秀的?首先我声明一下,我还不清楚这个东西具体叫什么名字(哪位知道还望告知),暂且叫 ...

  3. 用CSS实现文本框尖角

    经常看到这样的尖角,以前不懂,以为都是用图片做出来的,后来惊奇的发现,原来很多都是用CSS做出来的,既美观又节省资源,真是两全其美啊! 那么,用CSS怎么实现这种效果呢?首先,来写一个简单的代码: & ...

  4. 纯 CSS 实现三角形尖角箭头的实例

    上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...

  5. CSS3之尖角标签

    如图所示,Tag标签的制作通常使用背景图片,现在用CSS3代码就能实现尖角效果(需浏览器支持CSS3属性). 运用CSS3样式实现尖角标签,只需要写简单的HTML结构和CSS样式. <p> ...

  6. html如何绘制带尖角(三角)的矩形

    结合实际情况自己写的: .menu_triangle { height: 10px; width: 10px; background-color: #049888; transform: transl ...

  7. WPF 气泡尖角在左边、下面、右边、上面

    由于项目需要,在弄一个气泡提示框,根据网上资料,使用Path可以将气泡画出来,下面是我画出来的. 1.气泡尖角在左边的: <Path Stroke="Black" Strok ...

  8. 爱上朴实的CSS细节

    英文原文:Learning to Love the Boring Bits of CSS  未来的CSS太让人兴奋了:一方面,是全新的页面布局方式:另一方面,是酷炫的滤镜.颜色等视觉效果.这些CSS, ...

  9. 纯CSS一个div实现无缝隙尖角框

    话不多说直接先上效果图 其实原理很简单,就是一个带边框的方块加上一个黑色三角形和一个白色三角形,最后通过position定位实现. 代码如下: HTML就一个div <div></d ...

随机推荐

  1. CCNA学习与实验指南——第2章 网络互联和参考模型

    大三下学期的这个时间段,不知道是不是社会就业的恐惧与自身前途的迷茫所带来的压力,身边的同学一个个的整天奔赴考研室学的好不努力,空荡荡的宿舍只剩我一人孑然聊聊甚是索然无味,亦或许是即将毕业的压力等接踵而 ...

  2. 分布式监控工具Ganglia 介绍 与 集群部署.

    如果你目的很明确就是冲着标题来的,不爱看我唠叨,请直接进入第二个分割线之后的内容. 其实之前就是有做Swift监控平台的打算的,但是因为没什么硬性需求么,也不要紧的,就一直搁置了.最近实验室来了个大二 ...

  3. 【转】用CornerStone配置SVN,HTTP及svn简单使用说明

    已经安装了的小伙伴请直接看三步骤 一.下载地址 CornerStoneV2.6:http://pan.baidu.com/s/1qWEsEbM密码:www.macx.cn 二.安装破解方法 1.安装之 ...

  4. 【三分钟视频教程】iOS开发中 Xcode 报 apple-o linker 错误的#解决方案#

      [三分钟视频教程]iOS开发中 Xcode 报 apple-o linker 错误的#解决方案#   同样的道理,指向同一库文件的代码语句如果重复书写,即使重复书写所在的文件名字不同,同样会造成这 ...

  5. 【转】详解linux vi命令用法

    功能最强在的编辑器--vi vi是所有UNIX系统都会提供的屏幕编辑器,它提供了一个视窗设备,通过它可以编辑文件.当然,对UNIX系统略有所知的人, 或多或少都觉得vi超级难用,但vi是最基本的编辑器 ...

  6. 服务器环境配置安装(mysql+redis+nodejs+nginx)

    公司用来测试的服务器挂了,最后重装了系统,需要重新配置程序运行环境,linux上安装不是很熟悉,特此记录一下. 首先获取系统版本信息: 参考:获取Linux系统版本信息 一.mysql 1. 安装 安 ...

  7. ZYNQ. GPIO

    GPIO General Purpose I/O ,网上能找到很多关于znyq gpio 的文章. 分类:EMIO .MIO .AXI_GPIO 硬件系统 MIO和EMIO是在zynq核中配置的,MI ...

  8. CSS float浅析

    写在开篇: 浮动属性的设计初衷,只是为了实现文本环绕效果! 时刻牢记这一点,才能正确使用浮动. 由于浮动元素脱离文档流,它后面的块级元素会忽略它的存在,占据它原本的位置,但是这个块级元素中的内联元素, ...

  9. Linux环境下FTP工具的使用方法

    在Windows环境下创建Ftp目录作为服务器根目录 在Linux端的操作: 从服务器端下载文件到Linux端: ftpget -u User -p Password ServerIP File Fi ...

  10. 【CTF WEB】函数绕过

    函数绕过 <?php show_source(__FILE__); $c = "<?php exit;?>"; @$c.=$_GET['c']; @$filena ...