CSS 之切出横幅

一去丶二三里

已于 2023-07-05 19:16:26 修改

阅读量3k

点赞数 2

分类专栏：编程语言文章标签： CSS CSS3 CSS切除 CSS横切

于 2016-03-16 19:32:24 首次发布

本文链接：https://blog.csdn.net/liang19890820/article/details/50907717

版权

编程语言专栏收录该内容

10 篇文章 3 订阅

订阅专栏

作者： 一去、二三里
个人微信号： iwaleon
微信公众号： 高效程序员

上节分享了clip-path来实现一个剪切横幅，本节通过另外一种方式来实现一个更经典的横幅。

最终效果

我们先看一下最终要实现的效果。

这里写图片描述

我们要实现这样一个效果，首先需要将其进行上下分割，上面为一个红色背景右边有剪切三角且下边带阴影效果的样式，下面是一个黑色小三角。

为了实现这个效果，我们一步步分析，先从小三角入手。

小三角

为了更容易理解过程，将其拆分为以下几步。

效果

这里写图片描述

源码

下面我们实现一个<div>，其宽度为50px，边框为20px，这里为了凸显效果，左、上、右、下边框的颜色分别设置为红、绿、蓝、橙。

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

.bord {
  width: 50px;
  border: 20px solid #fff;
  border-left-color: red;
  border-top-color: green;
  border-right-color: blue;
  border-bottom-color: orange;
}

</style>
</head>
<body>
  <div class="bord">
    
  </div>
</body>
</html>

这个显然不满足我们三角的需求，好的我们再分析，小三角为上边框和右边框组合而成，但是由于宽度过大会造成不能均分，这时我们再进行一下设置。

看效果：

这里写图片描述

注意：这里只改动了这一处代码

.bord {
  width: 0px;
  ...
}

如果我们将左边框、下边框设置为透明，上边框、右边框设置会黑色不正好是我们想要的效果么。有点意思，我们不妨试试。

这里写图片描述

.bord {
  width: 0px;
  border: 20px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

是不是很喜人呢O(∩_∩)O~。

阴影分割

三角实现了，那么阴影分割可以参考上一节的实现。

效果

这里写图片描述

源码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type='text/css'>
.bord {
  position: relative;
  margin: 50px;
}

.bord:before {
  content: "青春不老，奋斗不止！纯正开源之美，有趣、好玩、靠谱。。。";
  position: absolute;
  color: #fff;
  font-weight: bold;
  height: 0px;
  border: 20px solid #a20000;
  /* 设置右边框透明 */
  border-right-color: transparent;
  line-height: 0px;
  box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.75);
  z-index: 1;
}

body {
  font-size: 13px;
}
</style>
</head>
<body>
  <div class="bord">
    
  </div>
</body>
</html>

这里主要说一下border-right-color: transparent。由于高度为0，边框为20px，所以这行样式和上面看到的一样将出现一个锯齿三角。

合并

将上面分别实现的两部分合并即可。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type='text/css'>
.bord {
  position: relative;
  margin: 50px
}

.bord:before {
  content: "青春不老，奋斗不止！纯正开源之美，有趣、好玩、靠谱。。。";
  position: absolute;
  /* 设置右内边距，防止文本显示不全 */
  padding-right: 15px;
  color: #fff;
  font-weight: bold;
  height: 0px;
  border: 20px solid #a20000;
  /* 设置右边框透明，实现剪切的三角 */
  border-right-color: transparent;
  line-height: 0px;
  box-shadow: 0 8px 8px -5px rgba(0, 0, 0, 0.75);
  z-index: 1;
}

.bord:after {
  content: "";
  /* 设置距离上边缘的距离 */
  top: 40px;
  position: absolute;
  border: 4px solid #000;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

body {
  font-size: 13px;
}
</style>
</head>
<body>
  <div class="bord">
    
  </div>
</body>
</html>

注意：

由于上部分的边框为20px，所以也就是说，高度为上下边框之和，即：40px，所以下面的小三角必须设置距离上边缘的距离top: 40px。否则，显示的位置就会出现错乱。