...虽然是一个很小的问题,但其实还是挺实用的。

实现一个边框外的角。

用纯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边框外的小三角形+阴影效果的实现。的更多相关文章

  1. 用CSS创建小三角形问题(笔试题常考)

    笔试题中经常遇到用CSS实现某个Div边框添加三角形问题,掌握一点,合理利用div的边框,当div有宽有高时,边框就是不起眼的边框,当div的宽高为0时,边框就是一个小方块,把剩下的三个边透明就是神奇 ...

  2. 如何使用CSS实现小三角形效果

    如何使用CSS实现小三角形效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在众多的网页效果中,都有小三角形效果的应用,能够增加特定应用的美观度,下面就给出一段实例代码,里面介绍了两种实现小 ...

  3. CSS中的一下小技巧1之CSS3三角形运用

    使用CSS3实现三角形: 在前端页面中有很多时候会遇到需要三角形图案的时候,以前不知道可以用CSS3实现三角形的时候,一般都是叫UI把三角形图案切出来. 后来知道原来可以用CSS3实现三角形,可是用过 ...

  4. 通过css实现小三角形

    下面是用css做小三角形的demo, <!DOCTYPE html><html lang="en"><head> <meta charse ...

  5. HTML&CSS基础-外边框

    HTML&CSS基础-外边框  作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML <!DOCTYPE html> <html> <h ...

  6. 用纯css写一个常见的小三角形

    .test{ margin:50px auto; width: 0; height: 0; overflow: hidden; border-width: 10px; border-color: #0 ...

  7. css兼容各个浏览器的三角形图标

    css兼容各个浏览器的三角形图标 在当前流行的的网站上,我们经常会看到一些小三角形的下拉提示(微博顶部的下拉菜单),简单的方式可以使用一张图片代替,但是随着前端技术的发展,以及开发者对于前端性能的“吹 ...

  8. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  9. CSS3做小三角形

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXgAAAA2CAIAAABC2hVZAAAgAElEQVR4nKzcd3cbV57web+1p20FW8

随机推荐

  1. (转)ORACLE中SID和SERVICE_NAME的区别

    背景:之前一直分不清plsql和程序中配置文件url之间的连接,想当然的认为service_name 和jdburl后面的实例相对应,直到出错的这一天,通过这篇博客,彻底扫除了盲点. 1 问题 1.1 ...

  2. javascript实现朴素贝叶斯分类与决策树ID3分类

    今年毕业时的毕设是有关大数据及机器学习的题目.因为那个时间已经步入前端的行业自然选择使用JavaScript来实现其中具体的算法.虽然JavaScript不是做大数据处理的最佳语言,相比还没有优势,但 ...

  3. ExtJs的expand和collapse

    最近在研究ExtJs的窗口组件(Ext.window),关于扩展显示expand和折叠显示collapse的一点心得记录一下,以便后查. var win2 = new Ext.window({ id ...

  4. POJ3660 Cow Contest floyd传递闭包

    Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...

  5. little bird

    LITTLE BIRD Bzoj 3831 相对而言是一道比较简单的DP,不过它需要用单调队列优化.首先是朴素O(n2), if(d[j]>f[i]) f[i]=min(f[i],f[j]); ...

  6. NYOJ--113--字符串替换

    /* Name: NYOJ--113--字符串替换 Author: shen_渊 Date: 18/04/17 15:41 Description: 字符串水题,秒过 */ #include<b ...

  7. WCF项目的架构设计

    本文将介绍以WCF开发项目为主的架构设计,主要从类库的分类和代码的结构. 下面将以一个WCF实例做具体的介绍.此项目底层是一个Windows Service,WCF服务Hosted在此Windows ...

  8. idea如何添加外部jar包

    假设我们要将G:\ModuleAPI_Java_2.2.0.0 .jar导入工程中: 首先,在mvn命令行执行下面命令: mvn install:install-file -Dfile=G:\Modu ...

  9. 优化hexo访问速度-将hexo部署到云主机VPS

    写在开始 一开始将自己hexo部署到github,结果发现打开页面速度有点慢,然后又将其同时部署到coding,实现双线路访问,国内解析记录到coding,国外解析到github,这样确实网站的速度能 ...

  10. 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 ...