css border实现的三角形图案

WBOY
Release: 2016-06-01 09:53:14
Original
1173 people have browsed it

利用css控制border的边框属性, 可以画出三角形,下面一步一步演示给大家看:

先看下面代码代码如下:

<code class="language-html"><style>
div{
    width:200px;
    height:200px;
    border-top:50px solid yellow;
    border-right:50px solid red;
    border-bottom:50px solid purple;
    border-left:50px solid blue;
}
</style>
<div></div></code>
Copy after login

效果如下图:

css border实现的三角形图案

如果我们将idth和height设为0,又会是什么样的呢:

<code class="language-html"><style>
div{
    width:0px;
    height:0px;
    border-top:50px solid yellow;
    border-right:50px solid red;
    border-bottom:50px solid purple;
    border-left:50px solid blue;
}
</style>
<div></div></code>
Copy after login

效果图如下:

css border实现的三角形图案

从图中可以看出,我们已经有了四个的三角形,如果只需要一个三角形,该怎么实现呢?很简单,只需要将其他三个边框的颜色设为透明transparent即可。

代码如下:

<code class="language-html"><style>
div{
    width:0px;
    height:0px;
    border-top:50px solid transparent;
    border-right:50px solid transparent;
    border-bottom:50px solid transparent;
    border-left:50px solid blue;
}
</style>
<div></div></code>
Copy after login

效果图:

css border实现的三角形图案

好了,效果达成了,大家现在应该知道怎么实现了吧,其实很容易。

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!