纯 CSS 实现三角形尖角箭头的实例

为什么80%的码农都做不了架构师？>>>

上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法

http://blog.csdn.net/zhouzme/article/details/18901943

，但没有怎么用上，也没有详细完整的实例，今天刚好要用上，整理了下，写个完整的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.area {margin:100px auto;width:300px; height: 150px;
}
.item {float:left; clear:both;margin-bottom:23px;
}
/* 向上的箭头 */
.dot-top {font-size: 0;line-height: 0;border-width: 10px;border-color: red;border-top-width: 0;border-style: dashed;border-bottom-style: solid;border-left-color: transparent;border-right-color: transparent;
}
/* 向右的箭头 */
.dot-right {font-size: 0;line-height: 0;border-width: 10px;border-color: red;border-right-width: 0;border-style: dashed;border-left-style: solid;border-top-color: transparent;border-bottom-color: transparent;
}
/* 向下的箭头 */
.dot-bottom {font-size: 0;line-height: 0;border-width: 10px;border-color: red;border-bottom-width: 0;border-style: dashed;border-top-style: solid;border-left-color: transparent;border-right-color: transparent;
}
/* 向左的箭头 */
.dot-left {font-size: 0;line-height: 0;border-width: 10px;border-color: red;border-left-width: 0;border-style: dashed;border-right-style: solid;border-top-color: transparent;border-bottom-color: transparent;
}
</style>
</head><body>
<div class="area"><span class="item dot-top"></span><span class="item dot-right"></span><span class="item dot-bottom"></span><span class="item dot-left"></span>
</div>
</body>
</html>

可以通过设置 border-width 来调整箭头的大小，这样就不需要每次都去做图了，非常方便，颜色可以随时调整，真佩服那位老兄，以前虽然也发现 border 的两边是斜的但没想到可以这样来做尖角箭头，太厉害了

显示结果图：

转载于:https://my.oschina.net/zhouz/blog/213129

纯 CSS 实现三角形尖角箭头的实例相关推荐

css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
纯Css实现三角形、气泡框的三角形
纯Css实现三角形上下左右箭头左上.左下.右上.右下箭头气泡框的三角形上下左右箭头效果图片 HTML <div class="tri ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
基于CSS实现的尖角提示符
CSS实现的尖角提示一.概述 ...
纯CSS实现三角形图标
纯Css实现三角形.气泡框的三角形 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rWU68bRK-1647095723236)(C:\Users\zwz\AppDat ...
【技能】使用纯CSS+html写出方向箭头，简单大方，好看
使用纯CSS+html写出方向箭头,贴出来就可以用,100%原创 <html><head><title></title><meta http-eq ...
纯CSS 绘制三角形气泡框
1.用纯css绘制带三角型的气泡框,不适合用图片 2.绘制的原理:当width和height均为0时,bord不为0时,边界交换处以45度角平分. 例子:先画一个三角吧 .dr{width:0px; ...
纯css实现各种方向小箭头
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用. 原理:一个高宽相等的正方形,选取你所需要的某一边 ...

纯 CSS 实现三角形尖角箭头的实例

纯 CSS 实现三角形尖角箭头的实例相关推荐

最新文章

热门文章