用CSS样式制作小三角和小箭头

利用css的border的style,width,color三个属性制作小三角和小箭头,颜色大小想怎么变就怎么变，不用担心使用图片失真等问题。

需要注意的是left,right,投票,bottom,这4个方位,需要一定的空间想象力,记住一个,其他的可以自己推算出来

transparent表示透明

小三角:

HTML结构

<div class="left"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>

CSS样式

div {width: 0px;height: 0px;
}

.left {
border-width: 20px;
border-style: solid;
border-color: transparent red transparent transparent;
}

.top {border-width: 20px;border-style: solid;border-color: transparent  transparent red transparent ;
}

.right {
border-width: 20px;
border-style: solid;
border-color: transparent transparent transparent red;
}

.bottom {border-width: 20px;border-style: solid;border-color: red transparent  transparent transparent ;
}

小箭头

左箭头

.left {
position: absolute;
}

    .left:before,.left:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px #fff solid;}.left:before {border-right: 20px #f00 solid;}.left:after {/* 覆盖并错开1px */left: 1px;border-right: 20px #fff solid;}

右箭头

.right {
position: absolute;
}

    .right:before,.right:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px #fff solid;border-bottom: 20px transparent dashed;border-right: 20px transparent dashed;}.right:before {border-left: 20px #f00 solid;}.right:after {/* 覆盖并错开1px */left: -1px;border-left: 20px #fff solid;}

上箭头

    .top {position: absolute;}.top:before,.top:after {position: absolute;content: '';border-top: 20px transparent dashed;border-left: 20px transparent dashed;border-bottom: 20px #fff dashed;border-right: 20px transparent solid;}.top:before {border-bottom: 20px #f00 solid;}.top:after {/* 覆盖并错开1px */top: 1px;border-bottom: 20px #fff solid;}

下箭头

.bottom {
position: absolute;
}

    .bottom:before,.bottom:after {position: absolute;content: '';border-top: 20px  #fff solid;border-left: 20px transparent dashed;border-bottom: 20px transparent dashed;border-right: 20px transparent dashed;}.bottom:before {border-top: 20px #f00 solid;}.bottom:after {/* 覆盖并错开1px */top: -1px;border-top: 20px #fff solid;}

用CSS样式制作小三角和小箭头相关推荐

小程序中的css样式有哪些,微信小程序中css样式media标签
前沿:微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式, ...
css样式制作步骤流程进度条
效果图如下 html部分只需要一个ul列表即可(进度条首尾根据自身需求去做修改) css样式部分代码第一步:生成一个长方形效果第二步:根据:after在长方形后面生成一个三角形第三步:修改后面三 ...
（新手制作，高手勿进） CSS样式制作网页心得
一.什么是CSS? CSS指的是层叠样式表(Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作.它可以同时控制多张网 ...
网页制作使用CSS样式制作轮播教程,静态网页设计与开发 1.案例——CSS3制作图片轮播图（4）使用纯CSS3代码实现简单的图片轮播——分步骤实现.docx...
使用纯CSS3代码实现简单的图片轮播设计思路: 以5张图片为例: 1.基本布局: 通过设置每张图片的尺寸和父容器的尺寸,从而将5张图片横向并排放入一个div容器(#photos)内.所有图片设置统一 ...
用html做一个横向导航菜单,CSS样式制作的漂亮WEB横向导航菜单
www.wfuyu.com 建站首页 Div+CSS教程 CSS布局实例 CSS2.0教程 CSS酷站欣赏提示:可修改后代码再运行!
简单练手使用css样式制作电子相册
先贴上源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html5 按钮css样式修改,css样式制作的漂亮按钮
复制代码代码如下: Demo: CSS3 Buttons body { background: #ededed; width: 900px; margin: 30px auto; color: #99 ...
微信小程序CSS样式图片闪烁
微信小程序CSS样式图片闪烁微信小程序直接用CSS样式让图片闪烁起来!!! 废话不多说!直接上代码 // 这是设置小程序WXSS页面 .shanshuo{-webkit-animation: twi ...
bootstrap思想总结_bootstrap学习心得总结-css样式设计分享
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭建 ...
css 鼠标hover 小手、箭头等样式
css 鼠标 hover 里 cursor 的属性 (小手.箭头-) 属性 cursor 属性值描述 ur l 需使用的自定义光标的 URL default 默认光标(通常是一个箭头) auto 默 ...

用CSS样式制作小三角和小箭头

用CSS样式制作小三角和小箭头相关推荐

最新文章

热门文章