CSS之切出横幅
来源:互联网 发布:淘宝助理怎么管理订单 编辑:程序博客网 时间:2024/04/27 21:30
简述
上节分享了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。否则,显示的位置就会出现错乱。
2 0
- CSS之切出横幅
- CSS之剪切横幅
- 横幅
- 横幅
- 横幅
- OpenCart之横幅广告(Banner)使用教程
- iOS自定义控件之滑动横幅
- HTML+CSS+JS实现banner横幅自动切换效果
- 横幅素材
- 幻灯片横幅
- 【USACO】横幅
- css如何创造出三角形
- 网页横幅制作
- 横幅广告(1)
- 常识横幅广告
- 横幅广告(1)Admob
- 横幅广告(2)admob
- 一个横幅广告
- MQTT协议详解一
- Dockerfile命令介绍及实例
- 安卓 jni 开发错误 undefined reference to __android_log_print
- 使用TextView实现跑马灯效果
- hdu1003 最大子数组
- CSS之切出横幅
- 很形象的dp算法
- WAB开发构建概述
- 九度题目1047素数判定
- CPU Affinity (CPU亲合力)
- 图像增强算法实现--直方图的均衡化
- MQTT协议详解二
- 吃糖果
- 设计模式系列(四)——装饰模式