前端css倒三角形设置方法

最新推荐文章于 2024-04-23 14:33:07 发布

百雨

最新推荐文章于 2024-04-23 14:33:07 发布

阅读量1.7k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/sinat_38068807/article/details/87901028

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

倒三角形：

盒子宽高设为0px

border设置合适的宽度，border-top设置颜色，其它透明便可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$美少女战士$</title>
    <style>

        /*   *   全局选择器*/

        * {
            margin: 0;  /*清除body和body孩子的外边距*/
            padding: 0;  /*清除body和body孩子的内边距*/

        }
        body {
            margin: 0;   /*清掉body默认外边距*/
        }
        .box {

            width: 0px;
            height: 0px;
          /*  background-color: pink;*/
            margin-top: 50px;
            margin-left: 200px;

            /*增大盒子 内减 width---》保证盒子正常放置 */
          /*  padding-left: 30px;*/
            /*边框border：  宽度 px  边形  solid 实现  dotted 圆点  dashed虚线    none 没有边框     颜色  */
           /* border: 100px solid  red;*/
            /*倒三角形*/
            border-top: 10px solid blue;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;





        }

    </style>
</head>
<body>
<div class="box"></div>

<p>空间的萨芬华润股份</p>

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

百雨

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端css倒三角形设置方法

倒三角形：盒子宽高设为0pxborder设置合适的宽度，border-top设置颜色，其它透明便可&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;$美少女战士$&lt;/title&gt;
复制链接

扫一扫