CSS3基础CSS制作上下左右箭头和房子图案的简单步骤

CSS制作上下左右箭头和房子图案的简单步骤

简单的箭头图案相当于是一个三角形和一个矩形拼接所得,在CSS里制作箭头的思路也是如此,先实现一个三角形,再通过伪元素添加一个矩形,下面先以向上的箭头为例具体看看怎么做:

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="uparrow"></div>
</body>
</html>

这里创建了一个空标签,下面先通过CSS制作一个顶点向上的三角形。在CSS三角形的做法一文中曾经分享过,如果需要一个顶点朝上的三角形,则只需将左,上,右三个方向的边框颜色设置为透明即可,所以可以如下定义:

.uparrow {
 width:0;height:0;
 border-width:16px;
 border-style:solid;
 border-color:transparent transparent #333 transparent;
 position:relative;
}

这时,一个顶点向上的三角形就做出来了,接下来通过伪元素添加一个矩形,并调整到合适的位置:

.uparrow:after {
 content:" ";
 width:16px;
 height:16px;
 background-color:#333;
 position:absolute;
 bottom:-30px;
 left:-8px;
}

这样以来,一个向上的箭头图案就做出来了:

CSS箭头.png

这个向上的箭头,只需把下方的矩形调整的宽一些,就是一个小房子的图案了,例如:

.uparrow:after {
 content:" ";
 width:20px;
 height:16px;
 background-color:#333;
 position:absolute;
 bottom:-30px;
 left:-10px;
}

CSS小房子图案.png

同样的方法,如果要制作向左的箭头,做法如下:

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {margin:20px;}
.leftarrow {
 width:0;height:0;
 border-width:16px;
 border-style:solid;
 border-color:transparent #333 transparent transparent;
 position:relative;
}
.leftarrow:after {
 content:'';
 width:20px;
 height:16px;
 background-color:#333;
 position:absolute;
 top:-8px;
 left:16px;
}
</style>
</head>
<body>
  <div class="leftarrow"></div>
</body>
</html>

CSS向左箭头.png

如果要制作向右的箭头,您可以这样做:

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {margin:20px;}
.rightarrow {
 width:0;height:0;
 border-width:16px;
 border-style:solid;
 border-color:transparent transparent transparent #333;
 position:relative;
}
.rightarrow:before {
 content:'';
 width:20px;
 height:16px;
 background-color:#333;
 position:absolute;
 top:-8px;
 right:16px;
}
</style>
</head>
<body>
  <div class="rightarrow"></div>
</body>
</html>

CSS向右箭头.png

如果要制作向下的箭头,那应该是这样:

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.downarrow {
 width:0;height:0;
 border-width:16px;
 border-style:solid;
 border-color:#333 transparent transparent transparent;
 position:relative;top:20px;
}
.downarrow:after {
 content:" ";
 width:16px;
 height:16px;
 background-color:#333;
 position:absolute;
 top:-30px;
 left:-8px;
}
</style>
</head>
<body>
  <div class="downarrow"></div>
</body>
</html>

CSS向下箭头.png

当然,这里还没用到CSS里的2D旋转,使用了旋转,可以直接改变箭头的方向,例如我给刚才向下的箭头增加一个2D旋转:

div {transform: rotate(135deg);}

这时候经过旋转,就变成了一个指向左上角的箭头了:

CSS箭头旋转.png

既然可以旋转,当然也是可以拉伸的,比如以向左的箭头为例:

div {transform:scale(2.5,1);}

这时候经过x轴方向的拉伸,就变成了一个长长的箭头,有点像路标的感觉:

CSS箭头拉伸.png

关于用CSS制作箭头的方法就分享到这里了,接下来回到刚才关于向上的箭头像个房子的问题,既然已经把房子做出来了,没道理不给它装个门吧,随便改个颜色看看,谁说一定要是黑色的呢:

<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {margin:20px;}
.uparrow {
 width:0px;height:0px;
 border-bottom-width:110px;
 border-left-width:200px;
 border-right-width:200px;
 border-style:solid;
 border-color:transparent transparent #e55 transparent;
 position:relative;
}
.uparrow:after {
 content:" ";
 width:260px;
 height:160px;
 background-color:#e55;
 position:absolute;
 bottom:-270px;
 left:-130px;
}
.uparrow:before {
 content:" ";
 background:#4be;
 width:70px;height:120px;
 border:5px solid #fff;
 position:absolute;
 top:120px;
 left:-60px;
 z-index:2;
}
</style>
</head>
<body>
  <div class="uparrow"></div>
</body>
</html>

这样以来,一间位于美国科罗纳多半岛的小别墅就这么完成了,需要给别墅装上窗户的朋友可以动手了,CSS本来就是这么有趣……

CSS房子图案.png

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.sz-kmd.com.cn/css3/142.html