css用border属性制作三角形

css用border制作三角形

在css中,我们可以用边框制作一个三角形

代码如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三角形title>
    <style type="text/css">
        .triangle{
            width: 0;
            height: 0;
            border-bottom:100px solid red;
            border-right:100px solid transparent;
            border-left:100px solid transparent;
        }
    style>
head>
<body>
    <div class="triangle">

    div>
body>
html>

transparent:代表透明的属性

显示效果
css用border属性制作三角形_第1张图片
同时,border只要设置三个边的宽度,另一个边框宽度不设置或为0,就能展示出一个三角形来。而且,我们可以设置上下左右四个方向上的三角形,三角形顶点指向没有设置的那一条边

具体为什么呢?

当我们把div盒子的长和宽设置为0时,只显示边框部分,而由于盒子一个边框长度为0,导致,这个盒子被三遍所覆盖,如果我们把三边都设有颜色时,就会发现,盒子被分割成三个三角形。即将两边的边框颜色设置成透明色,就能看到,矩形只显示中间一个三角形。

你可能感兴趣的:(前端学习)