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. ormlite操作表记录

    实体类的创建对应表中people表, @DatabaseTable(tableName="people") public class People { @DatabaseField ...

  2. Android单个进程内存分配策略

    android不同设备单个进程可用内存是不一样的,可以查看/system/build.prop文件. # This is a high density device with more memory, ...

  3. MESI－CPU缓存一致性协议

    转http://blog.csdn.net/realxie/article/details/7317630 http://en.wikipedia.org/wiki/MESI_protocol MES ...

  4. 通过反射获取class文件中的构造方法,运行构造方法

    /* * 通过反射获取class文件中的构造方法,运行构造方法 * 运行构造方法,创建对象 * 1.获取class文件对象 * 2.从class文件对象中,获取需要的成员 * * Constructo ...

  5. 算法笔记_143:构造无向图的欧拉回路(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 具体链接:https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Item ...

  6. ThreadPoolExecutor中策略的选择与工作队列的选择（java线程池）

    工作原理 1.线程池刚创建时,里面没有一个线程.任务队列是作为参数传进来的.不过,就算队列里面有任务,线程池也不会马上执行它们. 2.当调用 execute() 方法添加一个任务时,线程池会做如下判断 ...

  7. webp转jpg

      webp转jpg CreateTime--2017年12月8日09:32:38 Author:Marydon 1.webp格式介绍 WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的 ...

  8. （二）hibernate进阶

    1.hibernate.cfg.xml常用配置以上节代码为例 <session-factory> <property name="connection.username&q ...

  9. 【LeetCode】98. Validate Binary Search Tree (2 solutions)

    Validate Binary Search Tree Given a binary tree, determine if it is a valid binary search tree (BST) ...

  10. EntityFramework~~~三种模式

    1:database-first 2:model-first 3:code-only 此处的code-only也就是大家叫的code-first,但是正确的叫法应该是code-only