使用CSS制作斜边矩形原理分析

一。先上一张图

二。上代码

.pick{position: absolute;z-index: 999;left: 0;top: 0;background: #fd3a51;line-height: 20px;padding: 0 6px 0 8px;color: #fff;font-size: 20px;text-align: center;
}.pick::after{content: ' ';position: absolute;top: 0;right: -8px;border-width: 20px 8px;border-style: solid;border-color:#fd3a51 transparent transparent transparent;
}

三。原理分析

为什么这样普普通通的两段css就能实现斜边的效果呢？

首先pick类里面就是中规中矩的画一个红色背景的矩形，真正起作用的是after伪类里面的border-color，如果现在这个设置还看不出所以然，我把border-color改成如下border-color:#fd3a51 black blue green;得到的效果图如下

现在就应该很清楚了，原来伪类造了一个左移8px的矩形，上下边厚度为20px等于元矩形高度，左右边厚度为8px刚好为左移8px的宽度，这样一个厚度的四条边使得每条边厚度形成一个三角形的效果（不得不佩服第一个发现此效果的人真是聪明啊），然后把不相关的边框设置为透明色隐藏，就得到斜边的效果了。

根据此原理，不难得出向右倾斜的边应该这么做

.self-pick::after{content: ' ';position: absolute;top: -20px;right: -8px;border-width: 20px 8px;border-style: solid;border-color:transparent transparent #fd3a51 transparent;
}

上移20px让下边与原矩形重合，保留下边颜色为原矩形颜色，其他边颜色设为透明

如图

使用CSS制作斜边矩形原理分析相关推荐

css制作圆角矩形,CSS绘制圆角矩形图形的效果
我们在给矩形的四角进行圆角处理时,我们早期,都是采用片图来完成,这无疑是给网页的加载增加了负担,大量的图片载入在网页里,流量消耗,对手机用户是一刺痛的.给网页及APP的加载速度,无疑是我们一直研究的方 ...
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
html中点击图标变色,css可变色图标及原理分析
第一步,把图标转成svg格式的第二步,使用iconfont生成代码点击图标管理->我的图标,如下图进入到我的图标之后,点击上传icon,如下图点此上传选中svg文件, 上传之后,点击去 ...
八木天线原理分析和制作过程
作为电磁换能元件,天线在整个无线电通信系统中位置十分重要,质量好坏直接影响着收发信距离的远近和通联效果,可以说没有了天线也就没有了无线电通信. 作为一款经典的定向天线,八木天线在HF.VHF以及UHF ...
【CSS】清除浮动 ③ ( 清除浮动 - 使用 after 伪元素 | 语法简介 | 兼容低版本浏览器 | 原理分析 )
文章目录一.清除浮动 - 使用 after 伪元素 ( 最流行写法 ) 1.额外标签法和 overflow 样式法弊端 2.after 伪元素清除浮动简介 3.after 伪元素清除浮动核心代码 ...
利用PHP制作简单的内容采集器的原理分析
利用PHP制作简单的内容采集器的原理分析 2008-12-12 11:24 前几天做了个小说连载的程序,因为怕更新麻烦,顺带就写了个采集器,采集八路中文网的,功能比较简单,不能自定义规则,不过大概思路 ...
安卓手机Recovery概述和原理分析
安卓手机Recovery概述 1.Recovery是用户想要刷机的过程中经常会遇到的一个词.那么什么是Recovery?Recovery模式又是什么意思?手机怎么进入Recovery模式? 2.Rec ...
长方形图片html圆形,css实现圆角矩形、半圆、圆形效果—border-radius使用详解
传统的圆角矩形实现,必须使用多张图片作为背景图案.CSS3的border-radius属性使得我们再也不必浪费时间去制作这些图片了. css实现圆角矩形.半圆.圆形效果的优点: * 减少维护的工作量, ...
html中正方形圆角框,CSS高级技巧:圆角矩形
所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明 ...

使用CSS制作斜边矩形原理分析

使用CSS制作斜边矩形原理分析相关推荐

最新文章

热门文章