如上的一张图,如果你用样式来写,你打算怎么写呢?
~~~~~~~~~~~~~~~~~~~~~ 旋转 定位 ?~~~~~~~~~~~~
我想了想,这个不就是写倒三角形原理的写法嘛~。那先来了解一下倒三角原理是啥?
先看如下代码:
html:
<p class="san-p"></p>
css:
.san-p{
width: 100px;
height: 100px;
border-width: 30px ;
border-style: solid;
border-color: #00bad2 yellow pink orange;
}
运行结果如下图:
可以看出,要是我们把height和width设置成0px,那么border就会占据整个空间。又因为css的每条边相交的地方,都是三角,也就是border是由四个三角形组成的。所以说,只要我们把宽度和告诉设置的很小,border的宽度设置很大,那么就可以得到如下效果:
修改一下css代码:
.san-p{