1. 前言

由于图片占的空间比较大,且图片越多,越不好管理,所以有些时候,我们可以使用一些简单的标签样式来实现简单的图形标志来替代图片。

2. 实例展示:

三角形示例

示例代码:

 <style type="text/css">
.triangle b {
border: 5px solid #fff;
border-left: 5px solid #353535;
margin: 0;
font-size: 0;
}
</style>
<b></b>

方向箭头示例 

示例代码:

 <style type="text/css">
.mark b{border:solid #D0D0D0;width:6px;height:6px;display:inline-block;}
.mark b.lmark{border-width:2px 2px 0 0;transform: rotate(45deg);}
</style>
<b class="lmark"></b>

使用css实现特殊标志或图形的更多相关文章

  1. CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]

    转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...

  2. 用CSS编写多种常见的图形

    用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...

  3. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  4. HTML+CSS 制作HTML5标志图

    效果图如下:(是用代码写的,而不是图片!) 网上看到的代码. 看了下,就是CSS的transform属性的应用.加上定位等.组合在一起形成图片. 没什么难点,就是width,left等数据得根据HTM ...

  5. css border 三角形阴影(不规则图形阴影) & 多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...

  6. css 制作圆角、圆形图形布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. CSS画各种二维图形

    1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...

  8. 纯 CSS 创建各种不同的图形形状

    使用代码 矩形 .rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <div></div&g ...

  9. 用CSS画出好玩的图形

    1.上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px so ...

随机推荐

  1. BCGcontrolBar(五) 对话框大小改变控件自动适应

    改变控件大小 首先在 构造函数中加入 EnableLayout(); 在OnInitDialog()函数中加入 CBCGPStaticLayout* pLayout = (CBCGPStaticLay ...

  2. Hibernate 零散知识点

    1 get方法和load方法查询时的区别: 如果在缓存中没有找到相应的对象,get会直接访问数据库并返回一个完全初始化的对象,过程中可能涉及多次数据库调用:而load会返回一个代理对象,只有在对象ge ...

  3. 基于Vue的Ui框架

    基于Vue的Ui框架 饿了么公司基于vue开的的vue的Ui组件库 Element Ui 基于vue pc端的UI框架 http://element.eleme.io/ MintUi 基于vue 移动 ...

  4. Hive基础之Hive表常用操作

    本案例使用的数据均来源于Oracle自带的emp和dept表 创建表 语法: CREATE [EXTERNAL] TABLE [IF NOT EXISTS] [db_name.]table_name ...

  5. sqoop操作之ORACLE导入到HIVE

    导入表的所有字段 sqoop import --connect jdbc:oracle:thin:@192.168.1.107:1521:ORCL \ --username SCOTT --passw ...

  6. GlusterFS PERFORMANCE TUNING

    众所周知,glusterfs对小文件而言,就是个鸡肋,特别是在一个目录下有过W的小文件图片时,ls简单就是个坑,下面我对线上的glusterfs参数做一些优化调整,调整的命令: gluster vol ...

  7. 异步请求fetch之初体验

    更好阅读体验可移步我的博客:Blog 导读 传递信息到服务器,从服务器获取信息,是前端发展的重中之重,尤其是现在前后端分离的大前提下,前后端的数据交互是前端的必修科目了.从很久之前到现在,ajax都是 ...

  8. 学习笔记:Zepto笔记

    1.Zepto对象不能自定义事件 例如执行:$({}).bind('cust',function(){}); 结果:TypeError:Object#hasnomethod'addEventListe ...

  9. 多数据源springboot-jta-atomikos

    参考:  https://github.com/classloader/springboot-jta-atomikos-demo 參考:二 :建议参考  https://blog.csdn.net/a ...

  10. 机器学习入门-随机森林预测温度-不同参数对结果的影响调参 1.RandomedSearchCV(随机参数组的选择) 2.GridSearchCV(网格参数搜索) 3.pprint(顺序打印) 4.rf.get_params(获得当前的输入参数)

    使用了RamdomedSearchCV迭代100次,从参数组里面选择出当前最佳的参数组合 在RamdomedSearchCV的基础上,使用GridSearchCV在上面最佳参数的周围选择一些合适的参数 ...