css三角

qq_50636169

于 2021-07-28 20:03:00 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/qq_50636169/article/details/119188271

版权

给盒子添加上一个小三角
1.先画一个大盒子box1，再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形
4.根据所需要的三角形的形状，把另外的三边设置为透明色
5.再把这个三角形移动到相应的位置就可以了

选择器 {
        width：0；
        height：0；
        line-height：0；
        font-size：0；
        border：50px solid transparent;
        border-left-color: yellow;}

 <style>
        div {
            position: relative;
            width: 200px;
            height: 300px;
            margin-top: 50px;
            background-color: teal;
        }
        span {
            position: absolute;
            left: 200px;
            top: 20px;
            width: 0px;
            height: 0px;
            line-height: 0px;
            font-size: 0px;
            border: 20px solid transparent ;
            border-left-color: teal;

        }
    </style>
</head>
<body>
    <div>
        <span></span>
    </div>
</body>

css三角化

在黄色的盒子里面做一个这样的三角形
在黄色的盒子里面做一个这样粉色的三角形
1.先画一个大盒子box1，再在大盒子中画一个小盒子box2
2.将box1设置相关的样式
3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形
4.只保留box2右边边框有颜色，上边框要稍大一点，右边框稍小一点，其余边框为0
5.移动到相应的地方

选择器 {
         width : 0;
         height: 0;
          border-color: transparent pink transparent transparent;
          border-style: solid;
          border-width: 100px 50px 0px 0px;}

<style>
      .box2 {
          float: right;
          width: 0px;
          height: 0px;
          border-color: transparent pink transparent transparent;
          border-style: solid;
          border-width: 100px 50px 0px 0px;
      }
      .box1 {
          width: 150px;
          height: 100px;
          background-color: yellow;
      }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
   
</body>

qq_50636169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css三角

给盒子添加上一个小三角1.先画一个大盒子box1，再在大盒子中画一个小盒子box22.将box1设置相关的样式3.使box2的宽高都为零，设置边框的粗细以及相关的样式，从而使得每边原本为梯形的边框变为三角形4.根据所需要的三角形的形状，把另外的三边设置为透明色5.再把这个三角形移动到相应的位置就可以了选择器 { width：0； height：0； line-height：0； font-size：0； border
复制链接

扫一扫