html中展开的小箭头,纯css实现各种方向小箭头

原理：一个高宽相等的正方形，选取你所需要的某一边，截取之，就是一个梯形，当高宽都为0，且其他边为透明颜色时，一个三角形就出来了

梯形

Document

.arrow {

width: 10px;

height: 10px;

border: 10px solid #000;

border-left-color:red;

}

2.把高宽设为0，其他边为透明颜色，三角形出来了

Document

.arrow {

width: 0;

height: 0;

border: 10px solid #000;

border-left-color:red;

}

3.在开发中，可以利用伪类，定位实现，不改变dom结构，简洁优雅。content提供给三角形的位置，这个属性不能少。

Document

.arrow{

position: relative;

width: 100px;

height: 40px;

background-color: #000000;

}

.arrow::after {

width: 0;

height: 0;

border: 10px solid transparent;

border-left-color:red;

content:'';

position: absolute;

left: 100px;

top: 10px;

}

4.现在追求平面化设计，还有另一种三角线箭头，更受欢迎。

设置两个伪类，前一个伪类覆盖至另一个了伪类，留出一些线出来就好

Document

.arrow{

position: relative;

}

.arrow::after,

.arrow::before {

width: 0;

height: 0;

border: 10px solid transparent;

border-left-color: red;

position: absolute;

content: "";

}

.arrow::before {

top: 0;

left: 73px;

border-left-color: blue;

}

.arrow::after {

top: 0;

left: 70px;

border-left-color: #ffffff;

}

html中展开的小箭头,纯css实现各种方向小箭头相关推荐

纯css实现各种方向小箭头
在开发页面的时候,遇到很多的列表都需要用到箭头,可以直接用图片作背景铺垫,纯CSS也能实现,并且没有兼容性顾虑,不用CSS3,相比而言,比图片更好用. 原理:一个高宽相等的正方形,选取你所需要的某一边 ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
微信小程序纯css实现刻度尺
微信小程序纯css实现刻度尺最近需要实现一个高度定制的刻度尺,但是网上现成的方案却是极少,最终找到了HaoTian的wx-scale.但是没有实现竖向的效果而且刻度范围大时,在安卓机上无法渲染完全( ...
html如何制作小圆点,纯CSS实现小圆点和三角形图案
纯CSS制作三角形和小圆点 .arrowbox{width:40px;height:30px;background: #333;padding:10px;position: relative;text ...
css订单导航栏横线动画,小程序纯css 实现tab导航栏下划线跟随动画
很多时候在做tab导航的点击时我们都会要上一个过渡的动画,不然的话会显得生硬,用户没有达到比较佳的用户体验.如下图: 在开发者工具中预览效果 t3fyo-a07nj.gif 我们可以用两种方法实现这样 ...
纯css写出来的小彩虹
文章目录下面是效果图下面是源代码学到的知识点今天在CodePen上看见一个用纯css写出来的动画,所以就自己敲了一下源代码链接下面是效果图下面是源代码 <head><m ...
小程序中纯CSS实现仿京东小优惠券图标
效果图: image.png 通常情况下可以用图片做背景图实现,但是,背景图如果用png,会出现被拉伸变形的问题,如果用svg会有兼容问题,同时也有被拉伸变形的问题,仔细分析,这个图标其实是一个圆角矩 ...
html动画箭头,纯css动画实现箭头向右无限前进
适用场景和效果描述:箭头线的宽度不定,箭头一直向右循环前进,且可随意设置颜色做不来gif,将就看吧原理: 背景设置渐变色,通过控制遮罩层的图形样式和位置,来实现箭头向右移动的效果,优点遮罩图形和背 ...

html中展开的小箭头,纯css实现各种方向小箭头

html中展开的小箭头,纯css实现各种方向小箭头相关推荐

最新文章

热门文章