CSS特殊边框

最新推荐文章于 2023-07-17 11:05:35 发布

前端小白۞

最新推荐文章于 2023-07-17 11:05:35 发布

阅读量630

点赞数

分类专栏：大前端文章标签： css css3 html

本文链接：https://blog.csdn.net/zzzz121380/article/details/122859403

版权

大前端专栏收录该内容

55 篇文章 6 订阅

订阅专栏

CSS特殊边框

在粉红色区域可以添加想要的内容
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .parallelogram {   
        width: 200px;   
        height: 120px;   
        transform:skew(-30deg); /*设置倾斜度为-30*/   
        /* -webkit-transform: skew(-30deg);   
        -moz-transform: skew(-30deg);   
        -o-transform:skew(-30deg);   
        -ms-transform:skew(-30deg);    */
        background-color: red;   margin: 50px auto; 
    }
  body{
    border: 1px solid black;
  }
   .b{
       width: 101%;/*100%有缝隙*/
       height: 300px;
       background-color: pink;
       position: relative;
   }
   .b .aa{
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    left: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 0 100vw 100px 0;
   }
   .b .bb{
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    border-color: transparent transparent #f7d0d0;
    border-style: solid;
    border-width: 0 100vw 100px 0;
   }
   .c{
      width: 101%;/*100%有缝隙*/
       height: 300px;
       background-color: #f7d0d0;
       position: relative;
   }
   .c .bb{
    position: absolute;
    width: 0;
    height: 0;
    bottom: 0;
    left: 0;
    border-color: transparent transparent #fff;
    border-style: solid;
    border-width: 0 100vw 100px 0;
   }
</style>
<body>
    <div class="b">
        <div class="aa"></div>
        <div>第一块</div>
        <div class="bb"></div>
    </div>
    <div class="c">
        <div>第二块</div>
        <div class="bb"></div>
    </div>
    <div class="parallelogram"></div>
</body>
</html>

前端小白۞

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS特殊边框

CSS特殊边框在粉红色区域可以添加想要的内容代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫