<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>纯CSS制作三角形和小圆点</title>

<style>

.arrowbox{width:40px;height:30px;background: #000;padding:10px;position: relative;text-align:center;margin:20px;color:#fff;line-height:30px;font-size:12px;}

.arrowbox span{display: inline-block;overflow:hidden;vertical-align: middle;position:absolute;top:22px;right:5px;line-height:12px;font-size:12px;}

.arrowbox span em{display:block;font-family:"Simsun";font-style:normal;font-weight:normal;}

.arrowbox span.size1{width:7px;height:4px;}

.arrowbox span.w_e{width:4px;height:7px;}

.arrowbox span.size2{width:14px;height:8px;}

.arrowbox span em.north{color:#fff;margin:-7px 0 0 -2px;}

.arrowbox span em.south{color:#fff;margin:0 0 0 -2px;}

.arrowbox span.w_e em.east{color:blue;margin: -2px 0 0 -7px;}

.arrowbox span.w_e em.west{color:yellow;margin:-2px 0 0 0;}

.arrowbox span.size2 em.south{margin:-5px 0 0 0}

.arrowbox span.size2 em.north{margin:2px 0 0 0}

.round{width:16px;height:16px;display: inline-block;font-size:20px;line-heigth:16px;text-align:center;color:#f00;text-decoration:none}

.round:hover{color:blue;text-decoration:none} 

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="arrowbox">首页<span class="size1"><em class="north">◆</em></span></div>

<div class="arrowbox">首页<span class="size1"><em class="south">◆</em></span></div>

<div class="arrowbox">首页<span class="w_e"><em class="east">◆</em></span></div>

<div class="arrowbox">首页<span class="w_e"><em class="west">◆</em></span></div>

<div class="arrowbox">首页<span class="size2"><em class="south">◆</em></span></div>

<div class="arrowbox">首页<span class="size2"><em class="north">◆</em></span></div>

<p>用font-size控制圆点的大小</p>

<a href="#" class="round">●</a>

</body>

</html>

纯CSS实现小圆点和三角形图案的更多相关文章

  1. 前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可 ...

  2. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  3. 分享张鑫旭大神的，纯css打字小技巧，我顺便收藏一下

    CSS代码: .typing { width: 15em; white-space: nowrap; border-right: 2px solid transparent; animation: t ...

  4. 纯css制作小三角

    在网站制作的过程中常涉及一些小图标,以前大部分会采用小图片.但有了css3后很多变得方便了,比如要在li列表的每行文字的前面加个小三角,可以这么写: <!DOCTYPE html> < ...

  5. 纯css实现不同方向的三角形

    .triangle { position: relative; &:after { position: absolute; top: 50%; transform: translate(0,- ...

  6. 纯CSS写三角形-border法

    (1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...

  7. 用CSS绘制箭头等三角形图案 [译]

    最近重新设计了我的网站,准备添加tooltips提示信息效果.实现很容易,但我想要让提示功能具有三角形的指示图标.当我重新思考想要所设计的每个图标颜色都随心所欲的时候,采用图片那就是一场灾难.幸运的是 ...

  8. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  9. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

随机推荐

  1. struts2解决动态多文件上传的问题（上传文件与数据库字段一一对应)(转)

    struts2多文件上传我想只要会用struts2的朋友都不会陌生,但是怎么在action中根据用户上传的文 件把文件路径写到数据库中对应的字段上呢?ps:我的意思是这样,页面上有固定的5个上传文件的 ...

  2. Golang-and-package-version-managment

    参考文章 学习Golang之后对golang中的版本管理,包管理等机制一直没有很好的琢磨,偶然想起还是觉得很有必要进行归纳,包管理使用起来简单,无非就是install,uninstall,list等, ...

  3. 【Codeforces Round #499 (Div. 2) E】Border

    [链接] 我是链接,点我呀:) [题意] 给你n个数字,每个数字可以无限用,每种方案可以组成一个和,问你%k的结果有多少种不同的结果. [题解] 相当于给你一个方程 \(x_1*a_1+x_2*a_2 ...

  4. jquery-常用插件集合

    001.弹出消息插件toastr https://github.com/CodeSeven/toastr 002.弹出页面全屏插件 https://github.com/sindresorhus/sc ...

  5. Collection、List、Set、Map之间的关系

    初学java,单个的接触有点迷糊,所以总结下他们的关系 一.关系 Collection --List:以特定顺序存储 --ArrayList.LinkList.Vector --Set:不能包含重复的 ...

  6. ios中NSUserDefaults的使用方法

    ios中NSUserDefaults的使用方法 NSUserDefaults类提供了一个与默认系统进行交互的编程接口.NSUserDefaults对象是用来保存.恢复应用程序相关的偏好设置,配置数据等 ...

  7. hdu 2032 一维数组实现杨辉三角

    杨辉三角 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...

  8. scikit-learn：3.5. Validation curves: plotting scores to evaluate models

    參考:http://scikit-learn.org/stable/modules/learning_curve.html estimator's generalization error can b ...

  9. [NIO]dawn之Task具体解释

    在上篇文章中,我们设置好了开发环境,接下来.我们将在了解了Task以及Buffer之后,再開始了解网络编程.我们首先来看看Task task简单介绍 package zhmt.dawn; import ...

  10. nyoj--891--找点（贪心）

    找点 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 上数学课时,老师给了LYH一些闭区间,让他取尽量少的点,使得每个闭区间内至少有一个点.但是这几天LYH太忙了,你们帮 ...