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. linux 查看文件夹下的文件个数(当前目录的文件数)//包含子目录

    ls -l |grep "^-"|wc -l   //验证了redhat好用 或 find ./company -type f | wc -l 查看某文件夹下文件的个数,包括子文件 ...

  2. javascript事件处理程序的3个阶段

    第一阶段:HTML事件处理阶段.就是在元素里面添加onclick之类的属性来调用某个函数. <input type="button" value="单击" ...

  3. NLP-Progress记录NLP最新数据集、论文和代码: 助你紧跟NLP前沿

    Github https://github.com/sebastianruder/NLP-progress 官方网址 https://nlpprogress.com/ NLP-Progress 同时涵 ...

  4. Deep Reinforcement Learning 基础知识

    Introduction 深度增强学习Deep Reinforcement Learning是将深度学习与增强学习结合起来从而实现从Perception感知到Action动作的端对端学习的一种全新的算 ...

  5. springboot的一些配置

    spring-boot 1.推荐使用yaml,因为默认的properties需要写更多的前缀 2.使用java -jar 的方式启动jar包的情况下,通过-spring.profiles.actiiv ...

  6. python学习之----初见网络爬虫(输出整个网页html的代码)

    from urllib import urlopen html = urlopen('http://www.manluotuo.com') print (html.read()) 控制台输出整个网页h ...

  7. Eclipse变量名自动补全问题 自定义上屏按键为TAB

    Eclipse空格等号等都可以上屏,这样有时候输入变量名再按空格就会自动补全,非常讨厌.那么怎么办呢? 1.首先你的Eclipse需要装有 Eclipse plug-in development en ...

  8. 转载:关于java关键字transient

    今天在map源码中看到这个关键字  百度看一下  转载记录下 源文:http://www.cnblogs.com/lanxuezaipiao/p/3369962.html 1. transient的作 ...

  9. Arrays.binarySearch 数组二分查找

    public static void main(String[] args) throws Exception { /** * binarySearch(Object[], Object key) a ...

  10. uva-10194-排序

    题意: 如果一个队伍的得分比对方高,那么就赢得这场游戏,很明显,如果得分低那就是输了,如果俩个队伍的得分一样,那么就是平局,赢得比较获得3个点的得分,平手1个点的得分,输了0分.排序规则如下1:得分点 ...