使用css实现特殊标志或图形
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实现特殊标志或图形的更多相关文章
- CSS制作的32种图形效果[梯形|三角|椭圆|平行四边形|菱形|四分之一圆|旗帜]
转载链接:http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet 前面在<纯CSS制作的图形效果>一文中介绍了十六种CSS画各种不 ...
- 用CSS编写多种常见的图形
用CSS编写多种常见的图形 正方形与长方形 这个是最简单的,直接上代码 <!DOCTYPE html> <html> <head> <title>< ...
- CSS border三角、圆角图形生成技术简介
http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...
- HTML+CSS 制作HTML5标志图
效果图如下:(是用代码写的,而不是图片!) 网上看到的代码. 看了下,就是CSS的transform属性的应用.加上定位等.组合在一起形成图片. 没什么难点,就是width,left等数据得根据HTM ...
- css border 三角形阴影(不规则图形阴影) & 多重边框的制作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! border 的组合写法 border:border-width border-style border- ...
- css 制作圆角、圆形图形布局
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS画各种二维图形
1.效果 2.源码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> ...
- 纯 CSS 创建各种不同的图形形状
使用代码 矩形 .rectangle { width: 250px; height: 150px; background-color: #6DC75F; } <div></div&g ...
- 用CSS画出好玩的图形
1.上三角 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px so ...
随机推荐
- 转载-JavaWeb学习总结
JavaWeb学习总结(五十三)——Web应用中使用JavaMail发送邮件 孤傲苍狼 2015-01-12 23:51 阅读:13407 评论:20 JavaWeb学习总结(五十二)——使用 ...
- RAII(Resource Acquisition Is Initialization)简介
RAII(Resource Acquisition Is Initialization),也称为“资源获取就是初始化”,是C++语言的一种管理资源.避免泄漏的惯用法.C++标准保证任何情况下,已构造的 ...
- pandas的set_index和reset_index方法
import pandas as pd data = pd.DataFrame(np.arange(1,10).reshape(3,3),index=["a","b&qu ...
- WARN hdfs.DFSClient: Caught exception java.lang.InterruptedException
Hadoop 2.7.4 The reason is this: originally, DataStreamer::closeResponder always prints a warning ab ...
- python拓展3 常用算法
知识内容: 1.递归复习 2.算法基础概念 3.查找与排序 参考资料: http://python3-cookbook.readthedocs.io/zh_CN/latest/index.html h ...
- Java调用Bat
import java.io.BufferedReader; import java.io.File; import java.io.IOException; import java.io.Input ...
- HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 门禁系统socket通讯编程
最近遇到一个socke udp协议通讯的需求,而且是16进制数据接收.这样在传输参数的时候老是提示参数错误,因为计算机是不能直接传输16进制的,会自行转换,所有以下代码非常完美的解决我的问题,同时也让 ...
- oracle imp dmp
windows>cmd> imp userid=用户名/密码@orcl file=d:\nc60.dmp full=y imp userid=SYSTEM/password@orcl fi ...
- gevent 实现单线程下的socket链接
通过gevent实现socket的多并发 server 端: import geventfrom gevent import socket, monkey monkey.patch_all() #进行 ...