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. WDA编译失败问题

    1.放假回来,wda编译失败,报错如下 2018-09-25 10:03:09.020964+0800 WebDriverAgentRunner-Runner[335:33309] +[CATrans ...

  2. Python 天气预报+微信

    """ Description: 需要提供以下三个信息,在申请到的微信企业号当中可以找到 agentid corpid corpsecret Author:Nod Dat ...

  3. zabbix企业应用:通过SNMP和iDRAC监控DELL服务器硬件

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://qicheng0211.blog.51cto.com/3958621/174998 ...

  4. [UE4]射击和直线追踪

    只有有朝向的组件(如character.Controller等)才能动态获取到朝向,在编辑视图中会有一个箭头表示正前方: 如果是没有朝向的组件(如摄像机),则获取到的朝向永远是固定的

  5. 2015ACM-ICPC长春E题(hdu5531)题解

    一.题意 No response.T_T 二.思路 分$n$为奇数或者偶数讨论. 如果$n$是奇数,列出不等式组:$r_1+r_2=d_{1},r_2+r_3=d_{2},r_3+r_4=d_{3}, ...

  6. 学习MongoDB 五: MongoDB查询(数组、内嵌文档)(二)

    一.简介 我们上一篇介绍了db.collection.find()可以实现根据条件查询和指定使用投影运算符返回的字段省略此参数返回匹配文档中的所有字段,我们今天介绍了对数组和内嵌文档的查询操作,尤其是 ...

  7. fs和http模块

    fs模块写入文件的方式 导入内置模块     const fs=require("fs")   一.异步写入方式     fs.writeFile("写入文件的路径&qu ...

  8. 关于QT中“崩溃”问题

    经常会遇到一个问题,程序运行崩溃! 1.release.debug直接运行崩溃. 2.程序可以运行但是点击界面崩溃. 3.debug模式崩溃,release正常. 4.软件里面的release和deb ...

  9. Mysql-表关系

    表关系分为三种:一对一,一对多,多对多 一对多:一个学院对应多个学生,而一个学生只对应一个学院   --  这儿classroom 是代表的学院. -- 一对多 - A表的一条记录 对应 B 表多条记 ...

  10. uva-10047

    我们考虑一个特殊情况,一个独轮车是一个圆环,独轮车靠这个圆环运动,这个圆环上涂有五个不同的颜色,如下图每个颜色段的圆心角是72度,这个圆环在MxN个方格的棋盘上运动,独轮车从棋盘中一个格子的中心点开始 ...