前端页面的一个业务（实现一个矩形一角横切的效果）

最新推荐文章于 2023-04-11 10:40:33 发布

William Wang~

最新推荐文章于 2023-04-11 10:40:33 发布

阅读量471

点赞数 1

分类专栏：前端技术文章标签： CSS3

本文链接：https://blog.csdn.net/qq_42773229/article/details/97140932

版权

前端技术专栏收录该内容

13 篇文章 1 订阅

订阅专栏

相信大家和我一样都遇到过各种各样的奇葩的变态的业务需求。哎~我就不废话了，直接看代码了：
咱们先Look Look效果图吧！如下：
在这里插入图片描述
HTML_Code Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="css/index.css" rel="stylesheet" />
</head>
<body>
    <div class="page">
        <div class="head_one">
            <div class="one border_view"></div>
            <div class="two border_view"></div>
        </div>
        <div class="head_two"></div>
    </div>
</body>
</html>

CSS3_Code Example:

*{
	margin:0;
	padding:0;
}
.page {
    padding: 0px 20px 50px 20px;
    width: 600px;
    height: 400px;
    margin: 0 auto;
}

    .page::after {
    position: absolute;
    left: 660px;
    top: 8px;
    width: 0;
    content: "";
    display: block;
    border: 28px solid white;
    border-color: white transparent transparent white;
    background-color: transparent;
    z-index: 999;
    }

.border {
    border: 1px solid red;
}

.head_one {
    height: 100px;
    border-left: 15px solid red;
    border-bottom: 0px solid red;
    border-right: 15px solid red;
    border-top: 15px solid red;
    position: relative;
}

.head_two {
    height: 100px;
    border-left: 15px solid red;
    border-bottom: 15px solid red;
    border-right: 15px solid red;
    border-top: 0px solid red;
}

.border_view {
    width: 100px;
    height: 100px;
}

.one {
    position: absolute;
    background-color: red;
}

.two {
    position: absolute;
    background: linear-gradient(135deg,transparent 35px, #fff 0);
}

代码里面有些地方还是需要注意（动态计算）的，感谢莅临！

有时候，垃圾只是放错位置的人才。