动态 静态 网站地图,自己建设一个平台网站多少钱,株洲seo排名,网站建设冫首先金手指十五网站前端页面中#xff0c;有时候会使用一些三角形#xff0c;除了使用图片的方式之外#xff0c;利用css的border属性也可以做出相对应的三角形。那么#xff0c;利用border是如何实现三角形的制作的呢#xff1f;
先看下面一个例子#xff1a;
CSS代码#xff1a; w… 网站前端页面中有时候会使用一些三角形除了使用图片的方式之外利用css的border属性也可以做出相对应的三角形。那么利用border是如何实现三角形的制作的呢
先看下面一个例子
CSS代码 width:100px;
height:100px;
border-top: solid 100px blue;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red; 运行结果 通过显示的结果可以看到边框的相交的地方都形成45°平分那么当元素的宽高都设置为0的时候会是什么样子呢
代码 width: 0;
height: 0;
border-top: solid 100px blue;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red;
运行结果 这样我们就看到了四个等边的三角形。那么我们想要的是一个三角形该怎么办呢试想一下假如我们去除一条边之后会变成什么样子呢
代码 width: 0;
height: 0;
border-left: solid 100px black;
border-right: solid 100px yellow;
border-bottom: solid 100px red;
运行结果 这次我们看到了三个三角形假如我们把黑色和黄色都换成透明的会不会就剩下一个红色的等边三角形了呢
代码 width: 0;
height: 0;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-bottom: solid 100px red;
运行结果 很显然三角形出现了。我们可以再试着修改一下border的宽度或者隐藏其他的边就可以得到不同的三角形了。
代码 width: 0;
height: 0;
border-left: solid 100px transparent;
border-right: solid 100px transparent;
border-bottom: solid 50px red;
运行结果 代码 width: 0;
height: 0;
border-top: solid 100px transparent;
border-bottom: solid 100px transparent;
border-left: solid 150px black;
运行结果 代码 width: 0;
height: 0;
border-top: solid 100px transparent;
border-left: solid 150px black;
运行结果 总结可以通过移除一条或两条边框设置相应边框透明实现三角形的制作可以变换多样更多例子不再列举。
