CSS画三角形

最新推荐文章于 2024-01-23 14:31:29 发布

tinyint_813

最新推荐文章于 2024-01-23 14:31:29 发布

阅读量58

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/tinyint_813/article/details/116721833

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

.test{
            /*width: 200px;*/
            /*height: 200px;*/
            width: 0;
            height: 0;
            /* border-top border-left border-bottom border-right变成了四个三角形 共同拼接为正方形*/
            /* transparent：透明的，让边框变透明 让其它的变透明就可得到一个三角形*/
            border-top: 100px solid transparent;
            border-left: 100px solid transparent;
            border-bottom: 100px solid #f0ad4e;
            border-right: 100px solid transparent;
            margin: 50px;
        }
<div class="test"></div>

border-top border-left border-bottom border-right变成了四个三角形共同拼接为正方形
transparent：透明的，让边框变透明让其它的变透明就可得到一个三角形

更简洁的方式

.one{
            width: 0;
            height: 0;
            /* 最简洁的方式：给border统一设置 像素、solid、transparent  再给某一边border-bottom-color设置颜色（相当于覆盖透明） */
            border: 200px solid transparent;
            border-bottom-color: cadetblue;
            margin: 50px auto;
        }