使用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 ...
随机推荐
- 1114 Family Property (25 分)
1114 Family Property (25 分) This time, you are supposed to help us collect the data for family-owned ...
- 解决provisional headers are shown的过程
前言 学习Angular时写了一个音乐播放器oschina地址github地址为了兼容android chrome,参考了这篇文章; 在数据读取中要中断的时候,可以把audio.src设为null,并 ...
- volotile关键字的内存可见性及重排序
在理解volotile关键字的作用之前,先粗略解释下内存可见性与指令重排序. 1. 内存可见性 Java内存模型规定,对于多个线程共享的变量,存储在主内存当中,每个线程都有自己独立的工作内存,并且线程 ...
- javascript创建对象之构造函数模式(二)
对上一章节的工厂模式进行代码重写 function Human(name, sex) { this.name = name; this.sex = sex; this.say = function ( ...
- win10安装.net framework3.5
win10默认没有安装.net framework3.5,一般方法需提取Windows安装镜像,麻烦. 离线安装方法如下: cab格式.NET Framework 3.5离线安装包下载地址:百度网盘 ...
- no_unnest,push_subq,push_pred的用法 (转)
常常有人把这三个hint搞混,主要是因为对三种重写原理不清楚.特总结如下.(实验环境为10204)1. no_unnest, unnestunnest我们称为对子查询展开,顾名思义,就是别让子查询孤单 ...
- 用docker搭建php+nginx+laravel的开发环境
制作镜像 由于官方php:7.2.2-fpm-alpine3.7 镜像不含composer,而单独做一个composer镜像又会依赖php镜像,所以应该在php镜像中添加composer.Docker ...
- Spark分析之Dependency
在Spark中,每一个RDD是对于数据集在某一状态下的表现形式,比如说:map.filter.group by等都算一次操作,这个状态有可能是从前一状态转换而来的: 因此换句话说一个RDD可能与之前的 ...
- 腾讯优图联手Science发布主题报告:计算机视觉的研发和应用
近日,腾讯优图与<科学>(Science)杂志共同发布<Seeing is believing: R&D applications of computer vision> ...
- uva-10110
走廊上的灯1-n编号,一个人走过去,第i次走的时候,如果灯编号n%i=0,那么就把这个灯的开关摁一下,从最后一个灯返回到第一个灯不做任何操作,问最后一个灯最后是关还是开, 求完全平方数, 比如8,不存 ...