使用css写三角箭头

.right-arrow{
    width:6px;
    height:6px;
    align-self: center;
    border-right:1px solid #2ac795;
    border-left:2px solid transparent;
    border-top:2px solid transparent;
    border-bottom:1px solid #2ac795;
    display:block;
    transform: rotateZ(-45deg);
}

以上为向右的箭头，如果箭头向左边，则需改变4个边框的宽度和旋转度数。

时间： 2024-08-24 12:07:15

使用css写三角箭头的相关文章

css实现三角箭头

像下面的向右三角箭头,只有纯css不需要图片就可以实现了. width:0px;height:0px;border-width:10px 7px 0 7px; border-style:solid;border-color: #ccc transparent transparent transparent; 向下箭头 width:0px;height:0px;border-width:20px 10px 0 10px ; border-style:solid;border-color:#FFF

用css写三角

题目: 请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:<div id=”demo”></div> 思路, 1)两个元素a,b:width与heigh设为0 left设为100%(这样要求父元素demo的position:relative,而ab的position:absolute) 2)border设为transparent,然后border-left下面的元素设为#000黑色,上面的元素设为#fff白色(下面的元素border比上面的大2px) 具体代码: htm

css写三角

.container{ position: relative; width: 200px; height: 200px; background: #abcdef; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .triangle{ position: absolute; top: 20px; right: -20px; width: 0; height: 0; line-height:

纯CSS制作的三角箭头

<!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> <title>纯CSS制作的三角箭头丨kiddy<

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用.代码如下: <div class="box2"> 纯css写带小三角对话框 </div> .box2{ float:left; position:relative; width:200px; height:100p

css实现带箭头选项卡

这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手机和电脑的屏幕显示图片的画质细节不同,导致1px的边框比1px的切图实际粗很多,对于有强迫症的人来说心里总是不舒服的……后来我就想,屁大点的箭头直接用css写一个算了.可是以前没写过,那就研究一下吧.网上有很多这方面的资料,但是还是那句话,那都是人家的不是自己的,要想据为己有自己也写篇博客吧. 这种

【转】纯CSS写三角形-border法[晋级篇01]

(1)有边框的三角形我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要用到其他办法. 最容易想到的,是叠加层.思路是将两个三角形叠加在一起,外层三角形稍大一些,颜色设置成边框所需的颜色:内层三角形绝对定位在里面.整体就能形成带边框三角形的假象. 这里就涉及到一个绝对定位的问题,上.下.左.右四种方向的三角形相对于父级定位是不同的.首先我们来看下,当定位都为0(left

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

同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)} </style> <div class="con"> <div class="icon"></div> <span>添加会

用纯CSS实现的箭头

div+css实现带三角箭头提示框链接:http://www.xuebuyuan.com/160534.html 链接:http://www.admin10000.com/document/4089.html 带三角箭头的提示框,就是下面所示: 这是一个提示框通常我们都用图片来实现上面那个小三角,因为这样方便快速,但是如果图片处理得不好,会看起来有杂边,从而影响视觉,所以换一种思路来解决. 首先来研究一下CSS是如何实现三角形的. 假定有一个盒子(div),给定宽高分别为100像素,再给定边