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

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

腾讯:

百度:

去哪网:

天猫:

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

优点:形状随意;

缺点:不方便维护;

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

<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

(转载) css实现小三角(尖角)的更多相关文章

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

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

  2. 用CSS制作小三角提示符号

    今天在项目中遇到了如下图的切图要求. 对,重点就是那个小三角提示符号. html 结构如下 <div class="wrap"> <div class=" ...

  3. 用CSS实现文本框尖角

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

  4. css实现小三角(原理)

    效果图如图1所示:(简单示范,有点丑,莫介意) PS:兼容IE,FF , chrome ,360安全浏览器 先讲下原理吧,如图2所示: 这个div的样式如下所示: div{ width: 0px; h ...

  5. css制作小三角

    视觉稿中经常有些小三角,如下图.每次用图片做太不方便了,我们看看用css实现的效果(支持ie6,7哦) <style> /*border实现三角*/ /*箭头向上*/ .arrow-top ...

  6. CSS的小三角

    上三角▲ width: 0; height: 0; line-height: 0; font-size: 0; border-width: 10px; border-style: solid; bor ...

  7. CSS实现小三角小技巧

    <style> .box{ width: 20px; height: 20px; background-color: #424; border: 10px solid #9C27B0; b ...

  8. CSS生成小三角

    前言:小三角的应用场景:鼠标移动到某个按钮上面,查看信息详情时,信息详情弹出框有时候会需要一个小三角. 代码如下: <div id='triangle'></div> #tri ...

  9. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

随机推荐

  1. jvm莫名退出问题解决

    当jvm莫名退出,没有留下任何任何信息的时候,在centos的 /var/log/dmesg文件中,或许可以找到一些端倪

  2. Android中view的事件

    view:top.left.right.bottom,相对于parent的位置参数,获取通过get*()来获取.width=right-left.height=bottom-top.x=left+tr ...

  3. 在ios8上 [TableView setSeparatorInset:UIEdgeInsetsMake(0,0,0,0)];不起作用 经过测试加入下面方法 在ios7 8上都可以正常工作

    -(void)viewDidLayoutSubviews { if ([self.tableView respondsToSelector:@selector(setSeparatorInset:)] ...

  4. SQL 数据库知识点回顾

    SQL2008 一.安装注意事项: 1.修改用户权限(在一个安装页面中有七八个)(改成net.) 2.添加当前系统用户为账户 二.主键,约束,索引 三.增删改查: insert.delete.upda ...

  5. mysql和VS2010 C++链接过程中出现的问题

    PS:二者连接的过程主要参考这篇博客园文章,http://www.cnblogs.com/justinzhang/archive/2011/09/23/2185963.html 这篇博客园的文章中的代 ...

  6. 关于lvs+keepalived只加入一台realserver问题

    今天做lvs+keepalived+mysql项目实施方案,在配置lvs+keepalived时都是ok的,但是就只加入第一台realserver.本人也感到很奇怪,lvs+keepalived本人也 ...

  7. img标签的方方面面

    <IMG>标签的方方面面 <img>标签是页面上最为重要的元素之一.很难想象一个页面上没有图片的样子,这样的页面效果将会大打折扣. 任何一个前端工程师想必对<img> ...

  8. bugfree搭建

  9. Noldbach problem

    Description Noldbach problem time limit per test: 2 seconds memory limit per test: 64 megabytes inpu ...

  10. (极简)linux安装QT4.7.3

    1.下载QT http://download.qt.io/ 我用的:qt-everywhere-opensource-src-4.7.3.tar.gz 2.解压安装QT 建议解压到/use/local ...