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
随机推荐
- Jmeter实现MD5加密
Jmeter3.0以后的版本不再内置MD5加密函数,只能自己写了. 1.编码 package com.liuke.test; import java.security.MessageDigest; i ...
- Windows Server 2008 配置IIS+PHP
问题: 最近要上线一个PHP写成的MVC项目,发现Windows Server 2008安装的还是PHP5.2,很多语法不支持. 尝试的一些解决方案: 1.将PHP升级为5.6,但是需要做好IIS和P ...
- 几种常见排序算法原理&C语言实现
一.冒泡排序(以下各法均以从小到大排序为例,定义len为数组array的长度) 原理:比较相邻元素的大小,对于每次循环,按排序的规则把最值移向数组的一端,同时循环次数依次减少. C代码实现 写法一: ...
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
- Python零基础学习系列之一--初识计算机!
1-1.计算机概念: Computer: 原指专门负责计算的人,后来演变成特指计算设备,译为"计算机" 计算机的概念: 计算机是能够根据一组指令操作数据的机器. A compute ...
- jsp 之 解决 Mysql net start mysql启动,提示发生系统错误 5 拒绝访问的问题
在dos下运行net start mysql时 !!!提示发生系统错误 5:拒绝访问!只要切换到管理员模式就可以启动了. 所以我们要以管理员身份来运行cmd程序来启动mysql. 1.在开始菜单的搜索 ...
- 如何关闭浏览器的HSTS功能
在安装配置 SSL 证书时,可以使用一种能使数据传输更加安全的Web安全协议,即在服务器端上开启 HSTS (HTTP Strict Transport Security).它告诉浏览器只能通过HTT ...
- spring集成mybatis实现mysql读写分离
前言 在网站的用户达到一定规模后,数据库因为负载压力过高而成为网站的瓶颈.幸运的是目前大部分的主流数据库都提供主从热备功能,通过配置两台数据库主从关系,可以将一台数据库的数据更新同步到另一台服务器上. ...
- JS获取字符串长度(区分中英文)
JS获取字符串长度(区分中英文) 中文算2个字,英文一个. function getStrLength(str) { var cArr = str.match(/[^\x00-\xff]/i ...
- 线索化二叉树的构建与先序,中序遍历(C++版)
贴出学习C++数据结构线索化二叉树的过程, 方便和我一样的新手进行测试和学习 同时欢迎各位大神纠正. 不同与普通二叉树的地方会用背景色填充 //BinTreeNode_Thr.h enum Point ...