css实现圆角三角形例子(无图片)

以前我们做圆角时都会要用到图片来实现，今天我给大家整理的这款css圆角效果是不需要图片的纯css实现的哦，下面我们一起来看看吧。

效果如下图所示

三角形所对方向"width: 0"，
反向为三角形高度(20)"border-width: 20px"，
反向颜色为三角形颜色"border-color: #eee"，
其它两个方向相加为三角形宽度(30)"border-width: 15px"
CSS:

代码如下

复制代码

span
{
    position: absolute;
    width: 0;
    height: 0;
    border-width: 0 15px 20px 15px;
    border-style: solid;
    border-color: transparent transparent #eee transparent;
    top: -20px;
    left: 50%;
    margin-left: -15px;
}

例子

代码如下

复制代码

<!DOCTYPE
html>
<html>www.111cn.net
<head>
    <title>随心所欲的三角形</title>
    <style>
        div {
            width:
200px;
            height:
60px;
           
background-color: #eee;
            position:
absolute;
            left: 50%;
           
margin-left: -150px;
           
margin-top: -50px;
            top: 50%;
           
border-radius: 10px;
            float:
left;
            font:
12px/20px "微软雅黑";
            color:
#000;
            padding:
20px 50px;
        }
        span {
            position:
absolute;
            top:
-20px;
            width: 0;
            height: 0;
           
border-width: 0 15px 20px 15px;
           
border-style: solid;
           
border-color: transparent transparent #eee transparent;
            left: 50%;
           
margin-left: -15px;
        } www.111cn.net
    </style>
</head>
<body>
    <div>
        <span></span>
        三角形所对方向"width:
0"，反对的方向为三角形高度颜色为三角形颜色，其它两个方向相加为宽度
    </div>
</body>
</html>

css实现圆角三角形例子(无图片)的更多相关文章

  1. CSS 美化复选框 - 无图片方式

    今天和大家分享一个不使用图片美化复选框的方式.来看下效果图吧,如下是3种不同状态下的效果: 一. Html结构 <div class="check-wrap"> < ...

  2. 网站性能优化之CSS无图片技术：三角形

    1.使用CSS无图片技术,可以总结得到以下三个优点: 减少请求资源的大小: 减少http的请求个数: 提高可维护性. 一.CSS无图片技术,微博中有哪些实际应用呢? 通过上面的展示,我们可以看到,无图 ...

  3. CSS页面重构“鑫三无准则”之“无图片”准则——张鑫旭

    一.再说关于“鑫三无准则” “鑫三无准则”这个概念貌似最早是在去年的去年一篇名叫“关于Google圆角高光高宽自适应按钮及其拓展”的文章中提过.这是自己在页面重构的经验中总结出来的一套约束自己CSS的 ...

  4. div css 伪类 不固定图片大小 居中， css div 实现三角形

    div css 伪类 不固定图片大小 居中 <style> .pic_box{width:300px; height:300px; background-color:#beceeb; fo ...

  5. 如何用css实现弧度圆角?三角形以及圆形

    用css画矩形圆角 ,需要使用到border-radius这个属性,下图四角圆,代码显示如下:border-radius:60px; width:360px; height:200px; border ...

  6. spin.js无图片实现loading进度条,支持但非依赖jquery

    特点: 1.无图片,无外部CSS 2.无依赖(支持jQuery,但非必须) 3.高度可配置 4.分辨率无关 5.旧版本IE不支持时,采用VML支持 6.使用关键帧动画,采用setTimeout() 7 ...

  7. 用CSS做圆角矩形

    第一种方法:如果是CSS2.2的话,可以简单写一个制作圆角矩形,分上中下裁成三张图 <title>CSS3实现圆角</title> <style type="t ...

  8. iHover – 30+ 纯 CSS 实现的超炫的图片悬停特效

    iHover 是一个令人印象深刻的图片悬停效果集合,完全基于 CSS3 实现,无依赖,能够搭配 Bootstrap 3 很好地工作.基于 SCSS 技术构建,便于修改变量.有模块化的代码,无需包含整个 ...

  9. Android Glide加载图片时转换为圆形、圆角、毛玻璃等图片效果

     Android Glide加载图片时转换为圆形.圆角.毛玻璃等图片效果 附录1简单介绍了Android开源的图片加载框架.在实际的开发中,虽然Glide解决了快速加载图片的问题,但还有一个问题悬 ...

随机推荐

  1. HDU 5361 In Touch （2015 多校6 1009 最短路 + 区间更新）

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=5361 题意:最短路.求源点到全部点的最短距离.但与普通最短路不同的是,给出的边是某点到区间[l,r]内随意 ...

  2. OE context 传参数

    来自:http://shine-it.net/index.php/topic,16360.0.html 有个需求想many2one字段关联显示的value在各个模块显示不同的值. 如果直接该rel_n ...

  3. Linux cmp命令——比较二进制文件（转）

    Linux cmp命令用于比较两个文件是否有差异. 当相互比较的两个文件完全一样时,则该指令不会显示任何信息.若发现有所差异,预设会标示出第一个不同之处的字符和列数编号.若不指定任何文件名称或是所给予 ...

  4. 企业版证书打包APP发布，安装后闪退问题解决。

    企业版证书打包APP发布,安装后闪退问题解决. 我现在就碰到这个问题,只要项目与Swift沾上边的,都会出问题. 如果我们是直接使用开发者证书进行真机调试,那么就不会出现问题,像往常一样好.但如果我们 ...

  5. jquery 入门与知识

    一)什么是jQuery? [以封装的思想,重构<<图片显示和隐藏>>] 第三方组织预先写好的一些实用JS文件.类,方法,都统称为JS实用库,免费放在网上,同时配有相关的学习文档 ...

  6. Coreseek安装测试配置指南(转)

    Sphinx--强大的开源全文检索引擎,Coreseek--免费开源的中文全文检索引擎 软件版本:coreseek-4.1 mmseg-3.2.14 autoconf-2.64 老版本的coresee ...

  7. 微信公共服务平台开发（.Net 的实现）3-------发送文本消息

    首先建立一个微信消息类. class wxmessage { public string FromUserName { get; set; } public string ToUserName { g ...

  8. SIFT 、Hog 、LBP 了解

    SIFT.HOG.LBP,这三者都属于局部特征. 一.三者原理上的区别 1.SIFT:Scale-Invariant Feature Taransform,尺度不变特征变换. 尺度空间的极值检测:搜索 ...

  9. Django的ORM中如何判断查询结果是否为空，判断django中的orm为空

    result= Booking.objects.filter() #方法一 .exists() if result.exists(): print "QuerySet has Data&qu ...

  10. 构建SqlSessionFactory 的过程

    1 SqlSessionFactory 的核心功能是创建 SqlSession 接口,而 SqlSessionFactory 是通过 SqlSessionFactoryBuilder 去构建. 构建步 ...