CSS边框外的小三角形+阴影效果的实现。
...虽然是一个很小的问题,但其实还是挺实用的。
实现一个边框外的角。
用纯CSS来写。
一开始实现的效果是这个样子的。

但是这个效果没有办法给他附带阴影,所以换了一种写法。实现成了这个样子

想要实现这个小三角形,不适用icon ,用纯CSS写,其实是利用了border的特性来实现的。
..之前都不晓得,后来有人告诉我之后,自己研究了一下才明白的。
虽然网上讲的人很多,但是我觉得把自己的收获记录下来才是最棒的。
我们先来看看border是什么样子的吧!

我们为一个长宽10px大小的盒子定义了30px的上下左右的边框
.border{
width: 10px;
height:10px;
border-top: 30px solid red;
border-left: 30px solid blue;
border-right: 30px solid green;
border-bottom: 30px solid yellow;
}
他的边框的边与边的交接是斜的!!
就是利用斜边,我们就可以画出三角形了!
首先我们将盒子归零。
然后把其中三边变透明,就可以看到一个三角形出现啦!

.border{
width: 0px;
height:0px;
border-top: 30px solid transparent;
border-left: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
}
但是...这并不能解决边框阴影的问题,因为如果加上阴影,效果就成这个样子了。
,阴影把我刚刚隐藏起来了的边框又显现出来啦!
这个时候如果想要实现三角形的边也有阴影,其实大佬们都已经知道了...再画一个三角形就好了...

再画一个border-top ;然后把图形旋转135°,再改变box-shadow的位置,就可以实现刚刚的效果啦。
最后贴一段源码,大家可以自己去尝试尝试哦!
.Father{
position: relative;
width: 200px;
height: 100px;
background-color: #fafafa;
box-shadow: 0 0 5px #444;
border-radius: 4px;
}
.ThreeC{
position: absolute;
top: 30px;
right: -30px;
width:;
height:;
border-top: 20px solid transparent;
border-bottom:20px solid #fafafa;
border-left: 20px solid #fafafa;
border-right: 20px solid transparent;
transform: rotate(-135deg);
box-shadow: 0px 0px 5px #444;
}
<div class="Father">
a
<div class="ThreeC"></div>
</div>
嘿嘿,记录。方便大家看看。
CSS边框外的小三角形+阴影效果的实现。的更多相关文章
- 用CSS创建小三角形问题(笔试题常考)
笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...
- 如何使用CSS实现小三角形效果
如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...
- CSS中的一下小技巧1之CSS3三角形运用
使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...
- 通过css实现小三角形
下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...
- HTML&CSS基础-外边框
HTML&CSS基础-外边框 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...
- 用纯css写一个常见的小三角形
.test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...
- css兼容各个浏览器的三角形图标
css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...
- 理解CSS边框border
前面的话 边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式 边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...
- CSS3做小三角形
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8
随机推荐
- (转)ORACLE中SID和SERVICE_NAME的区别
背景:之前一直分不清plsql和程序中配置文件url之间的连接,想当然的认为service_name 和jdburl后面的实例相对应,直到出错的这一天,通过这篇博客,彻底扫除了盲点. 1 问题 1.1 ...
- javascript实现朴素贝叶斯分类与决策树ID3分类
今年毕业时的毕设是有关大数据及机器学习的题目.因为那个时间已经步入前端的行业自然选择使用JavaScript来实现其中具体的算法.虽然JavaScript不是做大数据处理的最佳语言,相比还没有优势,但 ...
- ExtJs的expand和collapse
最近在研究ExtJs的窗口组件(Ext.window),关于扩展显示expand和折叠显示collapse的一点心得记录一下,以便后查. var win2 = new Ext.window({ id ...
- POJ3660 Cow Contest floyd传递闭包
Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...
- little bird
LITTLE BIRD Bzoj 3831 相对而言是一道比较简单的DP,不过它需要用单调队列优化.首先是朴素O(n2), if(d[j]>f[i]) f[i]=min(f[i],f[j]); ...
- NYOJ--113--字符串替换
/* Name: NYOJ--113--字符串替换 Author: shen_渊 Date: 18/04/17 15:41 Description: 字符串水题,秒过 */ #include<b ...
- WCF项目的架构设计
本文将介绍以WCF开发项目为主的架构设计,主要从类库的分类和代码的结构. 下面将以一个WCF实例做具体的介绍.此项目底层是一个Windows Service,WCF服务Hosted在此Windows ...
- idea如何添加外部jar包
假设我们要将G:\ModuleAPI_Java_2.2.0.0 .jar导入工程中: 首先,在mvn命令行执行下面命令: mvn install:install-file -Dfile=G:\Modu ...
- 优化hexo访问速度-将hexo部署到云主机VPS
写在开始 一开始将自己hexo部署到github,结果发现打开页面速度有点慢,然后又将其同时部署到coding,实现双线路访问,国内解析记录到coding,国外解析到github,这样确实网站的速度能 ...
- The ways to kill Oracle session
As we all known ,its the normal way to use the SQL 'alter system kill 'sid,serial#'' to kill a ses ...