CSS三角形的绘制

最新推荐文章于 2024-10-06 23:37:55 发布

SAS13

最新推荐文章于 2024-10-06 23:37:55 发布

阅读量66

点赞数

分类专栏： html、css学习文章标签： css html

本文链接：https://blog.csdn.net/SAS13/article/details/120572538

版权

html、css学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

用CSS进行三角形的绘制，主要用到的是border属性。

border属性可设置所有边的宽度、样式、颜色。先后顺序仍然是上右下左。

例如：border:10px solid black;

border-width:10px 10px 10px 10px;

border-style: dotted solid double dashed;

border-color: black white blue gray

当然，也可以单独设置各边的样式：

border-top;border-right;border-bottom;border-left

当一个块的长宽为0时，对其设置边框边框属性可以得到四个三角形。

<head>
    <style>
    .a{width: 0px; height:0px; 
            border: 100px solid;
            border-color: black gray wheat white;}
    </style>
</head>
<body>
    <div class="a"></div>
</body>

所以只要我们把另外三边的rgba的a设置为0就可以形成一个三角形了

<head>
.a{width: 0px; height:0px; 
            border: 100px solid;
            border-color: black rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) ;}
    </style>
</head>
<body>
    <div class="a"></div>
</body>