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. 6-3-3ios自动化-数据驱动

    https://testerhome.com/topics/14247 #!/usr/bin/env python3 # coding:utf-8 from appium import webdriv ...

  2. https单向认证服务端发送到客户端到底会不会加密?

    最近向大神请教了CA认证单向认证和双向认证的问题,有一点不太明白,单向认证的时候,为什么服务端发送到客户端的东西也是加密的?

  3. sklearn.naive_bayes中几种朴素贝叶斯分类器

    区别: 几种朴素贝叶斯分类器的区别在于对于分布的假设,即假设满足的形式. 一.高斯NB 导入 from sklearn.naive_bayes import GaussianNB 假设特征的似然函数满 ...

  4. securecrt8注册码

    securecrt8注册码,两个可用 Name:meisiCompany:TEAM ZWTSerial Number:03-14-367662License Key:ACCFAX R9FHJ7 QZV ...

  5. delphi WebBrowser的使用方法详解(五)-难点释疑

    网页代码:<SELECT id=fy onchange=TouchRefresh(1) name=fy> <OPTION selected value=15>每頁顯示15筆&l ...

  6. Oracle内存详解之二 Library cache 库缓冲-转载

    Library cache是Shared pool的一部分,它几乎是Oracle内存结构中最复杂的一部分,主要存放shared curosr(SQL)和PLSQL对象(function,procedu ...

  7. 《GPU高性能编程CUDA实战》附录四 其他头文件

    ▶ cpu_bitmap.h #ifndef __CPU_BITMAP_H__ #define __CPU_BITMAP_H__ #include "gl_helper.h" st ...

  8. task 03-27

    To integrate  the spring with  jpa, Basically completed the jpa of study;To integrate  the spring wi ...

  9. Nginx Windows 安装启动

    原文连接:http://tengine.taobao.org/book/appendix_c.html#nginxwindows 下载 Nginx是开源软件,用户可以访问 http://nginx.o ...

  10. tomcat APR的配置

    Tomcat 可以使用 APR 来提供超强的可伸缩性和性能,更好地集成本地服务器技术. APR(Apache Portable Runtime) 是一个高可移植库,它是 Apache HTTP Ser ...