0.5px的线、css画三角形

最新推荐文章于 2024-04-13 00:00:00 发布

明天的明_小明

最新推荐文章于 2024-04-13 00:00:00 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/mingtian_mt/article/details/119707642

版权

画一条0.5px的线

<style>

 * {
        margin: 0;
        padding: 0;
    }

    .line {
        margin-top: 300px;
        position: relative;
    }

    .line:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        background: red;
        transform: scaleY(0.5);
    }

</style>

<body>

    <div class="line"></div>

</body>
CSS伪元素::after用来创建一个伪元素，作为已选中元素的最后一个子元素。通常会配合content属性

transform属性 css3新增 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

CSS绘制三角形—border法

div {
width: 0;
height: 0;
border: 40px solid;
border-color: transparent transparent red;
}

  div {
        width: 0;
        height: 0;
        border: 40px solid;
        border-color: transparent transparent red;
    }

/* border-right: 50px solid blue;
        border-top: 50px solid red;
        border-bottom: 50px solid yellow;
        border-left: 50px solid #000; */

明天的明_小明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
0.5px的线、css画三角形

画一条0.5px的线<style>*{margin:0;padding:0;}.line{margin:300px0;position:relative;}.line:after{ content:""; position:absolute;left:0; right:0;width:100%; height:1px; backg...
复制链接

扫一扫