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. SQL语句中拆分字段

    SELECT PARSENAME(replace(MONITOR_ROOM_ID,'^' , '.'), 1) AS RoomID FROM ZY_MONITOR_ROOM 遇到以前系统高人设计的表, ...

  2. Matlab矩阵基本操作（定义，运算）

    转自:http://blog.csdn.net/perfumekristy/article/details/8119861 一.矩阵的表示在MATLAB中创建矩阵有以下规则: a.矩阵元素必须在”[ ...

  3. iOS子线程操作检测版本更新，有新版本通知用户更新, CheckVersion

    iOS子线程操作检测版本更新,有新版本通知用户更新 CheckVersion 一:如何使用: #import "CheckVersion.h" //输入你的app在appStore ...

  4. zoj3662Math Magic

    Math Magic Time Limit: 3 Seconds       Memory Limit: 32768 KB Yesterday, my teacher taught us about ...

  5. Web中树形数据(层级关系数据)的实现—以行政区树为例

    在Web开发中常常遇到树形数据的操作,如菜单.组织机构.行政区(省.市.县)等具有层级关系的数据. 以下以行政区为例说明树形数据(层级关系数据)的存储以及实现,效果如图所看到的. 1 数据库表结构设计 ...

  6. 浅析JDK中ServiceLoader的源码

    前提 紧接着上一篇<通过源码浅析JDK中的资源加载>,ServiceLoader是SPI(Service Provider Interface)中的服务类加载的核心类,也就是,这篇文章先介 ...

  7. MySQL InnoDB简介

    从MySQL 5.5版本开始InnoDB已经是默认的表存储引擎 InnoDB 1:完全支持ACID 2:支持行级锁 3:支持MVCC 4:支持外键 MySQL 5.1版本 MySQL 5.1版本之前, ...

  8. Android 应用开发实例之情景模式

    2013-07-01 Android 应用开发实例 1. 情景模式 使用TabHost来实现主界面的布局. 设置一组RadioButton来切换不同的情景模式. 对比普通情景模式,定时情景模式需要加上 ...

  9. Linux命令-压缩解压命令:tar

    tar [选项] [打包后文件名] [打包前的文件或者目录名称] -c表示创建(create-创建) -z表示压缩(gzip-压缩) -j表示压缩(bzip2-压缩) -v显示进度(verbose-冗 ...

  10. Silver Cow Party

    Description One cow from each of N farms (1 ≤ N ≤ 1000) conveniently numbered 1..N is going to atten ...