border制作小箭头的技巧(面试题)

珠峰HTML|CSS精讲视频 admin 223浏览

不切图片的情况下如何制作箭头和小三角形的形状(面试题)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.arrow{
width: 20px;
height: 20px;
border-top: 1px solid red;
border-left: 1px solid red;
transform: rotate(45deg);
margin: 50px 0 0 50px;
}
</style>
</head>
<body>
<div class="arrow"></div>
</body>
</html>

如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度,得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度.

  1. 小三角形的大小由正方形的宽高去控制
  2. 小三角形的粗细由border边框线的宽度去控制
  3. 小三角形的颜色由border边框线的颜色去控制

转载请注明:大灰牛博客 » border制作小箭头的技巧(面试题)