css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例

上次无意中发现了个使用纯 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;

}

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

显示结果图：

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

css改火狐滚动条样式_纯css美化滚动条样式
知乎的编辑器对于复制转发文章来说特别不友好(直接复制后代码乱码,字体变化,表格数据丢失),不太想过多重复编辑,只会编辑转发部分到这上面来,如感觉还不错,请跳转到:https://www.emperin ...
html i标签css 图标,ICONO – 仅一个标签实现的纯CSS图标
ICONO – 仅一个标签实现的纯CSS图标 1月 29, 2015 评论 Sponsor 图标在WEB和APP设备上是很常用的设计元素,有些网站为了兼容高分辨率的显视屏,比如苹果Retina设备,一 ...
php垂直居中代码_纯css实现水平和垂直居中
有时候我们需要实现一个水平居中和垂直居中的效果.例如你想做一个网页版的PPT,你希望演示的内容区域总是居中.这里介绍一个纯css实现. 水平和垂直居中 body {JQUERY的Deferred应用 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
纯css导航下拉_纯CSS标签导航
纯css导航下拉 The appearence of "tab" navigation is relatively easy to create, but making a tab ...
java实现星级评分功能_纯CSS的星级评价效果
前言这种星星评价效果,相信大家这个并不陌生,经常会遇到这个.现在如果要我们自己实现一个,很多人第一反应可能用JS+CSS去实现它.这种方式并没有什么不好的地方,只是我们在复用的时候不是很方便,需要带 ...
css加号图标_纯CSS制作各种各样的网页图标（三角形、暂停按钮、下载箭头、加号等）...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
怎么用java做水滴动画_‘纯css实现Material Design中的水滴动画按钮’的js体验优化...
前言在上一篇,我们已经实现了用纯css实现水滴扩散动画,但是有一些瑕疵,文章结尾处也提到过,一是页面加载进来就会看到按钮上的水滴动画运动一次,二是点击的时候不能根据鼠标的位置来扩散,今天我们来解决这 ...
java写三角形圆矩形_纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例

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

最新文章

热门文章