<!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. NOIP2018提高组金牌训练营——数论专题

    地址 https://www.51nod.com/live/liveDescription.html#!liveId=23 1187 寻找分数 给出 a,b,c,d, 找一个分数p/q,使得a/b & ...

  2. 常见的版本号及Springcloud的版本

    谈谈软件版本号的认识 一.常见版本号说明 举个瓜:2.0.3 RELEASE 2:主版本号,当功能模块有较大更新或者整体架构发生变化时,主版本号会更新 0:次版本号.次版本表示只是局部的一些变动. 2 ...

  3. STM32 软件复位并模拟USB拔插

    最近做了个USB跟上位机的通信,需要软件对MCU进行复位,复位后如果USB没有拔插,PC就不会重新枚举USB为了解决这个问题,我做了软件复位跟,软件模拟USB拔插. 这里我用的是HAL库的软件复位,复 ...

  4. CSS3特效——六面体

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. word上怎么打钩

    原文:http://www.wordlm.com/html/2291.html 有时我们在Word中制作一份特殊的表格时,可能会用到这样一些特殊符号,“在方框里打钩”或打叉.这些符号虽看起来简单不起眼 ...

  6. HDU 4303 Contest 1

    说实话,挺复杂的一道题. 我采用栈的方式,DFS在搜索完一个节点的所有子结点后,通过排序,加快计算该结点所有可能的路径:子结点与子结点的连通,子结点与父结点的连通,通过父结点与各祖先结点的连通.同时记 ...

  7. 《Objective-C高级编程:iOS与OS X多线程和内存管理》读后感

    拿到这本书的第一感觉是非常薄,可是内容就如同序里面所说,这不是一本面向刚開始学习的人的书,比較有深度,对C/C++全然不熟悉的话非常多东西会看不明确. 尽管此书在技术点上仅仅谈到了ARC.Blocks ...

  8. 【剑指offer】Q31：连续子数组的组大和

    简短的分析见:http://blog.csdn.net/shiquxinkong/article/details/17934747 def FindGreatestSumOfSubArray(arra ...

  9. MySQL事件调度器Event Scheduler

    我们都知道windows的计划任务和linux的crontab都是用来实现一些周期性的任务和固定时间须要运行的任务. 在mysql5.1之前我们完毕数据库的周期性操作都必须借助这些操作系统实现. 在m ...

  10. 本书已出版&lt;拨云见日：基于android的内核与系统架构源代码分析 &gt;

    已陆续倒到各大电商站点及新华书店 http://item.jd.com/11594135.html http://product.china-pub.com/4472138 http://www.am ...