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. ASP.NET Web Pages:发布网站

    ylbtech-.Net-ASP.NET Web Pages:发布网站 1.返回顶部 1. ASP.NET Web Pages - 发布网站 学习如何在不使用 WebMatrix 的情况下发布 Web ...

  2. android手机版本

    1.判断安卓手机是64位,还是32位 adb pull /system/bin/cat file cat 32位 64位 2.判断安卓手机CPU是64位,还是32位 adb shell getprop ...

  3. vmware 共享文件夹(win10下的vmware安装了centos7)

    最近研究下了docker.我的笔记本是win10系统,就尝试使用了 win10的hyper-v虚拟化技术,总是感觉占用系统较多,于是换成了vmware,在虚拟机中安装 docker容器服务. 考虑到开 ...

  4. java编译器知识

    代码编译器: 代码: 编译就是讲一种代码编译成计算机可以理解的指令. ================================================================= ...

  5. centos7.3安装zend guard loader3.3 for php5.6

    1 下载zend guard loader 到这里选择自己的系统版本  我选择的64位 for php5.6.3  linux http://www.zend.com/en/products/load ...

  6. Redis 安装 和 启动

    Redis下载官网 http://download.redis.io/releases/  本人下载了stable版 1:安装步骤 ># wget http://download.redis.i ...

  7. hibernate 三种状态

    JPA是Java Persistence API的简称,中文名Java持久层API. 因JPA是由Hibernate的创建者编写,因此和Hibernate基本相似一致.JPA由不同的服务解析,因此在w ...

  8. ABAP-ITS Mobile

    ITS Mobile是14年开发EWM项目时用到的技术方案,本文主要记录下ITS Mobile的整个实现过程. 1.ITS Mobile介绍 ITS Mobile:Internet Transacti ...

  9. nginx 无法访问root权限的文件内容

    问题: 按照的nginx,nginx配置的user  是 nginx,nginx 是root用户启动的.  文件夹A放的那啥是root用户上传的文件. 可 nginx 无法访问 到  文件. 方法: ...

  10. JAVA NIO学习记录1-buffer和channel

    什么是NIO? Java NIO(New IO)是从Java 1.4版本开始引入的一个新的IO API,可以替代标准的Java IO API.NIO与原来的IO有同样的作用和目的,但是使用的方式完全不 ...