CSS之切出横幅

简述

上节分享了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。否则,显示的位置就会出现错乱。

时间: 2024-10-25 10:13:17

CSS之切出横幅的相关文章

常见的CSS问题给出“一站式”的解决方案

css|解决|问题 "CSS Crib Sheet"旨在为很多常见的CSS问题给出"一站式"的解决方案 如果曾用CSS创建过一两个网站的话,那么很容易发现浏览器对CSS的支持仍远远称不上完美.取决于作品的复杂程度,最终很有可能导致这样的结局:沉陷于CSS的泥沼中, 气愤得只想撞墙,并发发誓今后再也不会去做Web设计,甚至会觉得哪怕是城市规划或都核物理,都要比CSS简单.友好得多. 若处于这样的情绪中,那么请相信自己并不孤单.在我们背后,整个社区都在一刻不停地与基于标

js+CSS实现弹出居中背景半透明div层的方法

 这篇文章主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1

js与css实现弹出层覆盖整个页面的方法

 本文实例讲述了js与css实现弹出层覆盖整个页面的方法.分享给大家供大家参考.具体实现方法如下: 弹出层透明背景加框的常用样式和结构如下:   代码如下: .alertMessageBg{ position:fixed; _position:absolute; width:100%; height:100%; left:0; top:0; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); z-in

js+CSS实现弹出居中背景半透明div层的方法_javascript技巧

本文实例讲述了js+CSS实现弹出居中背景半透明div层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

mpd-除了MP4box还有哪些视频切割工具能切出dash格式的视频?

问题描述 除了MP4box还有哪些视频切割工具能切出dash格式的视频? 我用mp4box切出来的格式用dash放不出来,老师说是mp4box生成的mpd文件和dash.js格式不容,让我用另一种工具去切视频 解决方案 http://www.oschina.net/question/1036475_108385 解决方案二: 兄弟,你给我的网页上这个问题也并没有人回答

Android应用第一次安装成功点击“打开”后Home键切出应用后再点击桌面图标返回导致应用重启问题的解决方法_Android

if((getIntent().getFlags() & Intent.FLAG_ACTIVITY_BROUGHT_TO_FRONT) != 0){ finish(); return; } 应用程序入口Activity的onCreate方法中加入上面的判断,完美解决应用程序多次重启问题. 应用程序入口Activity的onCreate方法中加入上面的判断,在setcontentview方法之前调用. 以上所述是小编给大家介绍的 Android应用第一次安装成功点击"打开"后Ho

JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法_javascript技巧

本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法.分享给大家供大家参考.具体分析如下: 在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下: 复制代码 代码如下: <!DOCTYPE html>    <html>    <head>    <meta charset=" utf-8">

基于JavaScript实现 网页切出 网站title变化代码_javascript技巧

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function

基于Jquery+div+css实现弹出登录窗口(代码超简单)_jquery

具体代码详情如下所示: 基本思路先隐藏(dispaly:none)再显示,半透明蒙版层通过 z-index:9998; z-index:9999; 值越大越在前面 index.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns