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. 全栈project师体能备战--知识面（10--20）

    WCF Windows Communication Foundation(WCF)是由微软开发的一系列支持数据通信的应用程序框架,能够翻译为Windows 通讯开发平台. 对于 WCF 的client ...

  2. Php自动备份数据库实现方法

    然后再服务器开启 定时任务执行这个方法即可.

  3. Jquery重新学习之五[操作JSON数据]

    Jquery操作Json格式的数据在我们平时的项目中也经常运用:最近看Jquery权威指南中就有一章节是对这方面的整理总结:最后通过一个Asp.net结合一般处理程序ashx的实例,基本上能满足项目中 ...

  4. 神经网络中 BP 算法的原理与 Python 实现源码解析

    最近这段时间系统性的学习了 BP 算法后写下了这篇学习笔记,因为能力有限,若有明显错误,还请指正. 什么是梯度下降和链式求导法则 假设我们有一个函数 J(w),如下图所示. 梯度下降示意图 现在,我们 ...

  5. cygwin下安装scws

    安装gcc和make命令 1.找到cygwin的etc目录中有一个名为passwd的文件.   2.用UE或记事本打开passwd这个文件,找到以下部分,把其中的windows用户名admin换成ro ...

  6. JS 校验，检测，验证，判断函数集合

    http://jc-dreaming.iteye.com/blog/754690 /**  *判断对象是否为空 *Check whether string s is empty.  */  funct ...

  7. MSSQL排序规则冲突

    更改表字段排序规则 ALTER TABLE 表名 ALTER COLUMN 字段名 数据类型(长度) COLLATE 排列规则

  8. DevExpress实现GridControl删除所有行的方法

    /// <summary> /// 删除全部行 /// </summary> /// <param name="gridView">GridVi ...

  9. unity, EventType.MouseUp注意事项

    如果鼠标移出了窗口范围,则即使鼠标抬起也不会收到EventType.MouseUp消息,所以只写 if(event==EventType.MouseUp){ 执行某操作 } 是错误的,会导致非常奇怪的 ...

  10. 并发登录人数控制--Shiro系列(二)

    为了安全起见,同一个账号理应同时只能在一台设备上登录,后面登录的踢出前面登录的.用Shiro可以轻松实现此功能. shiro中sessionManager是专门作会话管理的,而sessinManage ...