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. 转adb Shell root 权限

    永久root带文件 因为开发需要,我经常会用到adb这个工具(Android Debug Bridge),我们都知道adb shell默认是没有root权限的,修改系统文件就很不方便了,adb pus ...

  2. vue 常见操作 及 ionic 实战回顾

    npm install axios sass-loader vue-infinite-scroll vue-router vuex express superagent --save --save 和 ...

  3. Java之开发工具(1) - Eclipse 如何设置注释的模板

    最常用的注释就是对类的说明和方法的说明,关于这类代码的注释方式,在Eclipse中可以这样进行设置: windows---preferences...---java--code style--code ...

  4. JavaWeb 绝对路径与相对路径

      JavaWeb 绝对路径与相对路径 CreateTime--2018年4月14日16:51:19 Author:Marydon 8.1 绝对路径 web项目不可能使用绝对路径,因为: 以文件的引用 ...

  5. Android －BLE蓝牙小DEMO

    代码地址如下:http://www.demodashi.com/demo/13890.html 原文地址: https://blog.csdn.net/vnanyesheshou/article/de ...

  6. php实现二维数组排序array_multisort($ages, SORT_DESC, $home)函数

    1.sql查询排序参数是order by,那么php进行排序呢 可以参考array_multisrot函数 //php进行二维数组排序 -xzz1009 foreach($home as $home) ...

  7. 爬虫-IP被封解决办法

    方法1. 之前由于公司项目需要,采集过google地图数据,还有一些大型网站数据. 经验如下:1.IP必须需要,比如ADSL.如果有条件,其实可以跟机房多申请外网IP.2.在有外网IP的机器上,部署代 ...

  8. cxf发布 webservice服务

    导包 antlr-2.7.7.jar aopalliance-1.0.jar asm-3.3.jar commons-collections-3.2.1.jar commons-lang-2.6.ja ...

  9. CSS的width:100%和width:auto区别

    CSS的width:100%和width:auto区别 一.   问题 前段时间在调整树结构的时候,发现如果树的节点名称比较长的话在IE6下则不会撑开外面的元素,导致节点的名称只显示了一半,同时图标和 ...

  10. Creating Physical Standby Using RMAN DUPLICATE...FROM ACTIVE DATABASE执行结果

    > run { > allocate channel prmy1 type disk; > allocate channel prmy2 type disk; > alloca ...