这是2015阿里巴巴前端实习生在线笔试题中的一道题
刚看到这道题的时候，其实我是一脸懵逼的，要实现这个图片的效果，而且没有给你图片。细看左边那个图形，发现都是一些简单得图形拼成的，那么就可以使用css的border来制作图形，应该是可以实现的。
下面是实现的代码：
<!DOCTYPE html>
<html>
<head>
<title>picture</title>
<style type="text/css">
.rectangle{
background: #FFF;
border: 10px solid #999999;
padding:10px;
height: 60px;
width: 100px;
}
.circle{
position:absolute;
margin-left: 70px;
margin-top: 5px;
width: 20px;
height: 20px;
background: #999999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.triangle{
width: 0;
height: 0;
position:absolute;
margin-top: 20px;
border-bottom: 40px solid #999999;
border-left: 25px solid transparent;
border-right: 35px solid transparent;
}
.triangle2{
width: 0;
height: 0;
position:absolute;
margin-top: 30px;
margin-left: 40px;
border-bottom: 30px solid #999999;
border-left: 15px solid transparent;
border-right: 35px solid transparent;
}
</style>
</head>
<body>
<div class="rectangle">
<span class="circle"></span>
<span class="triangle"></span>
<span class="triangle2"></span>
</div>
</body>
</html>
效果是这样的，跟原图还是很像的：
下面附上使用纯css制作各种基本图形的代码及原理：
如何工作？
我们先看一段代码：
.css-arrow-multicolor {
border-color: red green blue orange;
border-style:solid;
border-width:20px;
width:0;
height:0;
}
显示的图片是这样的：
由这个例子可以看出来，当高度和宽度都为零时，显示的就都是border的宽度了，这时候就可以由border来构成我们想要的图形了。比如，可以通过设置某一边的border然后把其他边的border设置为透明色来获得三角形，也可以通过设置border上右下左的不同宽度来使得三角形的高宽不同，而获得不同角度的三角形等。
我们看一个三角形：
对应的css为：
width: 0;
height: 0;
border-bottom: 30px solid #999999;
border-left: 15px solid transparent;
border-right: 35px solid transparent;
1、三角形都可以通过这种方式产出，包括上三角、右三角、下三角、左三角、左上、右上、右下、左下三角等。
2、而长方形和正方形的话可以直接通过div设置背景颜色得到，这样还可以在div中添加内容，当然，如果想直接通过border制作出来也是很简单得。
3、圆形的话，css3新增了border-radius属性，只需要让宽度和高度一致，然后设置boeder-radius为他们的一半就ok了。
4、椭圆形可以使用border-radius的X/Y两轴取值，制作出一种变形的圆角，在配合宽度等值，就制作了类似椭圆形的一个效果。css如下：
#oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
网友评论